diff --git a/src/css/settings-export.css b/src/css/settings-export.css index ee70a102..67d6b91e 100644 --- a/src/css/settings-export.css +++ b/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; } \ No newline at end of file diff --git a/src/css/settings.css b/src/css/settings.css index 0402608d..96100886 100644 --- a/src/css/settings.css +++ b/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; diff --git a/src/js/controller/settings/exportimage/ImageExportController.js b/src/js/controller/settings/exportimage/ImageExportController.js index 3e4bd210..8d672ce3 100644 --- a/src/js/controller/settings/exportimage/ImageExportController.js +++ b/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'; + }; })(); diff --git a/src/js/utils/BlobUtils.js b/src/js/utils/BlobUtils.js index 10568904..ecd295aa 100644 --- a/src/js/utils/BlobUtils.js +++ b/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 { diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 79c177a8..0c79e2d7 100644 --- a/src/js/utils/UserSettings.js +++ b/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 }, /** diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html index 6163fd28..c2288653 100644 --- a/src/templates/settings/export.html +++ b/src/templates/settings/export.html @@ -1,4 +1,14 @@