piskel/js/rendering/SpritesheetRenderer.js

(function () {

  var ns = $.namespace("pskl.rendering");

  ns.SpritesheetRenderer = function (framesheet) {
    this.framesheet = framesheet;
  };

  ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () {
    var canvas = this.createCanvas_();
    for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
      var frame = this.framesheet.getFrameByIndex(i);
      this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
    }
    return canvas.toDataURL("image/png");
  };

  ns.SpritesheetRenderer.prototype.blobToBase64_ = function(blob, cb) {
    var reader = new FileReader();
    reader.onload = function() {
      var dataUrl = reader.result;
      cb(dataUrl);
    };
    reader.readAsDataURL(blob);
  };

  ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function(fps, cb) {
    var dpi = 10;
    var gif = new window.GIF({
      workers: 2,
      quality: 10,
      width: 320,
      height: 320
    });

    for (var i = 0; i < this.framesheet.frames.length; i++) {
      var frame = this.framesheet.frames[i];
      var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
      gif.addFrame(renderer.render(), {
        delay: 1000 / fps
      });
    }

    gif.on('finished', function(blob) {
      this.blobToBase64_(blob, cb);
    }.bind(this));

    gif.render();
  };


  /**
   * TODO(juliandescottes): Mutualize with code already present in FrameRenderer
   */
  ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
    var context = canvas.getContext('2d');
    for(var col = 0, width = frame.getWidth(); col < width; col++) {
      for(var row = 0, height = frame.getHeight(); row < height; row++) {
        var color = frame.getPixel(col, row);
        if(color != Constants.TRANSPARENT_COLOR) {
          context.fillStyle = color;
          context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
        }
      }
    }
  };

  ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
    var frameCount = this.framesheet.getFrameCount();
    if (frameCount > 0){
      var width = frameCount * this.framesheet.getWidth();
      var height = this.framesheet.getHeight();
      return pskl.CanvasUtils.createCanvas(width, height);
    } else {
      throw "Cannot render empty Spritesheet";
    }
  };
})();