crowdstf/res/app/components/stf/screen/fast-image-render/index.js

// See http://jsperf.com/fastest-canvas-drawing/2
// See http://jsperf.com/canvas-drawimage-vs-putimagedata/3
// See http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays

function FastImageRender(canvasElement, options) {
  var that = this
  this.options = options || {}
  this.canvasElement = canvasElement
  this.timeoutId = null

  if (that.options.raf) {
    that.animLoop = function() {
      that.raf = window.requireAnimationFrame(that.animLoop)

      // separate render from drawing
      // render
    }
  }

  // Loader
  this.loader = new Image()
  this.loader.onload = function() {
    if (that.options.timeout) {
      clearTimeout(that.timeoutId)
    }
    if (typeof (that.onLoad) === 'function') {
      that.onLoad(this)
    }
  }
  this.loader.onerror = function() {
    if (that.options.timeout) {
      clearTimeout(that.timeoutId)
    }
    if (typeof (that.onError) === 'function') {
      that.onError(this)
    }
  }

  if (this.options.render === 'webgl') {
    var WebGLRender = require('./webgl-render').WebGLRender
    this.render = new WebGLRender(canvasElement, options)
  } else {
    var CanvasRender = require('./canvas-render').CanvasRender
    this.render = new CanvasRender(canvasElement, options)
  }


}

FastImageRender.prototype.destroy = function() {

  window.cancelAnimationFrame(this.raf)

  // delete onLoad & onError
}

FastImageRender.prototype.load = function(url, type) {
  var that = this

  if (that.options.timeout) {
    that.timeoutId = setTimeout(function() {
      if (typeof (that.onError) === 'function') {
        that.onError('timeout')
      }
    }, that.options.timeout)
  }

  if (this.options.textureLoader) {
    if (!this.textureLoader) {
      this.textureLoader = new window.TextureUtil.TextureLoader(this.render.ctx)
    }
    var texture = null
    if (type) {
      texture = this.render.ctx.createTexture()
      this.textureLoader.loadEx(url, texture, true, function() {
        if (typeof (that.onLoad) === 'function') {
          that.onLoad(texture)
        }
      }, type)
    } else {
      this.textureLoader.load(url, function(texture) {
        if (typeof (that.onLoad) === 'function') {
          that.onLoad(texture)
        }
      })
    }

  } else {

    this.loader.src = url
  }
}

FastImageRender.prototype.draw = function(image) {
  this.render.draw(image)
}

FastImageRender.prototype.clear = function() {
  this.render.clear()
}

Object.defineProperty(FastImageRender.prototype, 'canvasWidth', {
  get: function() {
    return this.canvasElement.width
  },
  set: function(width) {
    if (width) {
      if (width !== this.canvasElement.width) {
        this.canvasElement.width = width
      }
    }
  }
})

Object.defineProperty(FastImageRender.prototype, 'canvasHeight', {
  get: function() {
    return this.canvasElement.height
  },
  set: function(height) {
    if (height) {
      if (height !== this.canvasElement.height) {
        this.canvasElement.height = height
      }
    }
  }
})

Object.defineProperty(FastImageRender.prototype, 'displayWidth', {
  get: function() {
    return this.canvasElement.width
  },
  set: function(width) {
    if (width) {
      if (width !== this.canvasElement.width) {
        this.canvasElement.width = width
      }
    }
  }
})

Object.defineProperty(FastImageRender.prototype, 'displayHeight', {
  get: function() {
    return this.canvasElement.height
  },
  set: function(height) {
    if (height) {
      if (height !== this.canvasElement.height) {
        this.canvasElement.height = height
      }
    }
  }
})

Object.defineProperty(FastImageRender.prototype, 'canvasStyleWidth', {
  get: function() {
    return parseInt(this.canvasElement.style.width, 10)
  },
  set: function(width) {
    if (width) {
      var styleWidth = width + 'px'
      if (styleWidth !== this.canvasElement.style.width) {
        this.canvasElement.style.width = styleWidth
      }
    }
  }
})

Object.defineProperty(FastImageRender.prototype, 'canvasStyleHeight', {
  get: function() {
    return parseInt(this.canvasElement.style.height, 10)
  },
  set: function(height) {
    if (height) {
      var styleHeight = height + 'px'
      if (styleHeight !== this.canvasElement.style.height) {
        this.canvasElement.style.height = height
      }
    }
  }
})


// -------------------------------------------------------------------------------------------------


// Check for Non CommonJS world
if (typeof module !== 'undefined') {
  module.exports = {
    FastImageRender: FastImageRender
  }
}