Adds the ability to export a scaled spritesheet.

src/css/settings-export.css

@@ -55,4 +55,25 @@
   -moz-box-sizing:border-box;
   background: rgba(0,0,0,0.5);
   color: white;
+}
+
+.scaling-factor-input {
+  margin: 5px;
+  vertical-align: middle;
+  width: 145px;
+}
+
+.scaling-factor-text {
+  height: 31px;
+  display: inline-block;
+  line-height: 30px;
+  width: 40px;
+  border: 1px solid grey;
+  box-sizing: border-box;
+  border-radius: 3px;
+  text-align: center;
+}
+
+.settings-section--export > .settings-item > label {
+  display: block;
 }

src/css/settings.css

@@ -84,7 +84,7 @@
 .drawer-content {
   overflow: hidden;
   background-color: #444;
-  height: 550px;
+  height: 600px;
   max-height: 100%;
   width: 280px;
   border-top-left-radius: 4px;

src/js/controller/settings/exportimage/ImageExportController.js

@@ -7,7 +7,15 @@
     this.gifExportController = new ns.GifExportController(piskelController);
   };
 
+  pskl.utils.inherit(ns.ImageExportController, pskl.controller.settings.AbstractSettingController);
+
   ns.ImageExportController.prototype.init = function () {
+    // Output Scaling Factor
+    var scalingFactorInput = document.querySelector('.scaling-factor-input');
+    scalingFactorInput.value = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
+    this.addEventListener(scalingFactorInput, 'change', this.onScalingFactorChange_);
+    this.updateScalingFactorText_(scalingFactorInput.value);
+
     this.pngExportController.init();
     this.gifExportController.init();
   };
@@ -16,4 +24,20 @@
     this.pngExportController.destroy();
     this.gifExportController.destroy();
   };
+
+  ns.ImageExportController.prototype.onScalingFactorChange_ = function (evt) {
+    var target = evt.target;
+    var value = Math.round(parseFloat(target.value));
+    if (!isNaN(value)) {
+      this.updateScalingFactorText_(value);
+      pskl.UserSettings.set(pskl.UserSettings.EXPORT_SCALING, value);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
+    }
+  };
+
+  ns.ImageExportController.prototype.updateScalingFactorText_ = function (scale) {
+    var scalingFactorText = document.querySelector('.scaling-factor-text');
+    scalingFactorText.innerHTML = scale + 'x';
+  };
 })();

src/js/utils/BlobUtils.js

@@ -23,9 +23,28 @@
       callback(blob);
     },
 
-    canvasToBlob : function (canvas, callback, type /*, ...args*/) {
+    canvasToBlob : function (sourceCanvas, callback, type /*, ...args*/) {
       type = type || 'image/png';
 
+      var exportScaling = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
+      var canvas;
+      if (exportScaling > 1) {
+        // Scale the input canvas to an offscreen canvas.
+        canvas = document.createElement('canvas');
+        canvas.width = sourceCanvas.width * exportScaling;
+        canvas.height = sourceCanvas.height * exportScaling;
+
+        var ctx = canvas.getContext('2d');
+        ctx.mozImageSmoothingEnabled = false;
+        ctx.webkitImageSmoothingEnabled = false;
+        ctx.msImageSmoothingEnabled = false;
+        ctx.imageSmoothingEnabled = false;
+
+        ctx.drawImage(sourceCanvas, 0, 0, sourceCanvas.width, sourceCanvas.height, 0, 0, canvas.width, canvas.height);
+      } else {
+        canvas = sourceCanvas;
+      }
+
       if (canvas.mozGetAsFile) {
         callback(canvas.mozGetAsFile('canvas', type));
       } else {

src/js/utils/UserSettings.js

@@ -11,6 +11,7 @@
     ONION_SKIN : 'ONION_SKIN',
     LAYER_PREVIEW : 'LAYER_PREVIEW',
     LAYER_OPACITY : 'LAYER_OPACITY',
+    EXPORT_SCALING: 'EXPORT_SCALING',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
@@ -24,7 +25,8 @@
       'TILED_PREVIEW' : false,
       'ONION_SKIN' : false,
       'LAYER_OPACITY' : 0.2,
-      'LAYER_PREVIEW' : true
+      'LAYER_PREVIEW' : true,
+      'EXPORT_SCALING' : 1
     },
 
     /**

src/templates/settings/export.html

@@ -1,4 +1,14 @@
 <div class="settings-section">
+
+  <div class="settings-title settings-section--export">
+    General Export Settings
+  </div>
+  <div class="settings-item">
+    <span class="settings-description" style="display:block"><label for="scaling-factor">Output Scaling Factor</label></span>
+    <span class="settings-description" style="display:block">Currently affects only spritesheet export.</span>
+    <input type="range" class="scaling-factor-input" name="scaling-factor" min="1"  max="32" step="1"/>
+    <span class="scaling-factor-text"></span>
+  </div>
   <div class="settings-title">
     Export Spritesheet
   </div>