Issue #414: part7: Support transparency for ZIP export

Added renderFrameAt API to LayerUtils
Reuse LayerUtils and PiskelController renderFrameAt in PngExportController

src/js/controller/settings/exportimage/PngExportController.js

@@ -60,8 +60,8 @@
   ns.PngExportController.prototype.mergedExport_ = function (zip) {
     var paddingLength = ('' + this.piskelController.getFrameCount()).length;
     for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
-      var frame = this.piskelController.getMergedFrameAt(i);
+      var render = this.piskelController.renderFrameAt(i, true);
-      var canvas = this.getFrameAsCanvas_(frame);
+      var canvas = pskl.utils.CanvasUtils.createFromImage(render);
       var basename = this.pngFilePrefixInput.value;
       var id = pskl.utils.StringUtils.leftPad(i, paddingLength, '0');
       var filename = basename + id + '.png';
@@ -77,8 +77,8 @@
       var layer = this.piskelController.getLayerAt(j);
       var layerid = pskl.utils.StringUtils.leftPad(j, layerPaddingLength, '0');
       for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
-        var frame = layer.getFrameAt(i);
+        var render = pskl.utils.LayerUtils.renderFrameAt(layer, i, true);
-        var canvas = this.getFrameAsCanvas_(frame);
+        var canvas = pskl.utils.CanvasUtils.createFromImage(render);
         var basename = this.pngFilePrefixInput.value;
         var frameid = pskl.utils.StringUtils.leftPad(i + 1, framePaddingLength, '0');
         var filename = 'l' + layerid + '_' + basename + frameid + '.png';
@@ -87,12 +87,6 @@
     }
   };
 
-  ns.PngExportController.prototype.getFrameAsCanvas_ = function (frame) {
-    var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
-    canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
-    return canvasRenderer.render();
-  };
-
   ns.PngExportController.prototype.getPiskelName_ = function () {
     return this.piskelController.getPiskel().getDescriptor().name;
   };

src/js/rendering/CanvasRenderer.js

@@ -4,6 +4,7 @@
   ns.CanvasRenderer = function (frame, zoom) {
     this.frame = frame;
     this.zoom = zoom;
+    this.opacity_ = 1;
     this.transparentColor_ = 'white';
   };
 
@@ -16,11 +17,15 @@
     this.transparentColor_ = color;
   };
 
+  ns.CanvasRenderer.prototype.setOpacity = function (opacity) {
+    this.opacity_ = opacity;
+  };
+
   ns.CanvasRenderer.prototype.render = function  () {
     var canvas = this.createCanvas_();
 
     // Draw in canvas
-    pskl.utils.FrameUtils.drawToCanvas(this.frame, canvas, this.transparentColor_);
+    pskl.utils.FrameUtils.drawToCanvas(this.frame, canvas, this.transparentColor_, this.opacity_);
 
     var scaledCanvas = this.createCanvas_(this.zoom);
     var scaledContext = scaledCanvas.getContext('2d');

src/js/utils/FrameUtils.js

@@ -9,22 +9,28 @@
      * @param zoom {Number} zoom
      * @return {Image}
      */
-    toImage : function (frame, zoom) {
+    toImage : function (frame, zoom, opacity) {
       zoom = zoom || 1;
+      opacity = isNaN(opacity) ? 1 : opacity;
+
       var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
       canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
+      canvasRenderer.setOpacity(opacity);
       return canvasRenderer.render();
     },
 
     /**
      * Draw the provided frame in a 2d canvas
      *
-     * @param frame {pskl.model.Frame} frame the frame to draw
+     * @param {Frame} frame the frame to draw
-     * @param canvas {Canvas} canvas the canvas target
+     * @param {Canvas} canvas the canvas target
-     * @param transparentColor {String} transparentColor (optional) color to use to represent transparent pixels.
+     * @param {String} transparentColor (optional) color to use to represent transparent pixels.
+     * @param {String} opacity (optional) global frame opacity
      */
-    drawToCanvas : function (frame, canvas, transparentColor) {
+    drawToCanvas : function (frame, canvas, transparentColor, opacity) {
       var context = canvas.getContext('2d');
+      opacity = isNaN(opacity) ? 1 : opacity;
+      context.globalAlpha = opacity;
 
       transparentColor = transparentColor || Constants.TRANSPARENT_COLOR;
       for (var x = 0, width = frame.getWidth() ; x < width ; x++) {
@@ -46,6 +52,7 @@
           y = y + w - 1;
         }
       }
+      context.globalAlpha = 1;
     },
 
     /**

src/js/utils/LayerUtils.js

@@ -42,17 +42,21 @@
       return mergedLayer;
     },
 
+    renderFrameAt : function (layer, index, preserveOpacity) {
+      var opacity = preserveOpacity ? layer.getOpacity() : 1;
+      var frame = layer.getFrameAt(index);
+      return pskl.utils.FrameUtils.toImage(frame, 1, opacity);
+    },
+
     flattenFrameAt : function (layers, index, preserveOpacity) {
       var width = layers[0].getFrameAt(index).getWidth();
       var height = layers[0].getFrameAt(index).getHeight();
       var canvas = pskl.utils.CanvasUtils.createCanvas(width, height);
+
       var context = canvas.getContext('2d');
       layers.forEach(function (l) {
-        var frameRender = pskl.utils.FrameUtils.toImage(l.getFrameAt(index));
+        var render = ns.LayerUtils.renderFrameAt(l, index, preserveOpacity);
-        if (preserveOpacity) {
+        context.drawImage(render, 0, 0, width, height, 0, 0, width, height);
-          context.globalAlpha = l.getOpacity();
-        }
-        context.drawImage(frameRender, 0, 0, width, height, 0, 0, width, height);
       });
 
       return canvas;