diff --git a/src/css/settings-export.css b/src/css/settings-export.css index ee70a102..aad86bb8 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; -} \ No newline at end of file +} + +.scaling-factor { + margin-bottom: 10px; +} + +.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; +} diff --git a/src/css/settings.css b/src/css/settings.css index 0402608d..fe44f3b6 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -132,7 +132,6 @@ .settings-description { margin : 0 0 10px 0; - display : inline-block; } .settings-form-section { diff --git a/src/js/controller/settings/exportimage/ImageExportController.js b/src/js/controller/settings/exportimage/ImageExportController.js index 3e4bd210..193ece6f 100644 --- a/src/js/controller/settings/exportimage/ImageExportController.js +++ b/src/js/controller/settings/exportimage/ImageExportController.js @@ -7,7 +7,16 @@ 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.addEventListener(scalingFactorInput, 'input', this.onScalingFactorChange_); + this.updateScalingFactorText_(scalingFactorInput.value); + this.pngExportController.init(); this.gifExportController.init(); }; @@ -15,5 +24,22 @@ ns.ImageExportController.prototype.destroy = function () { this.pngExportController.destroy(); this.gifExportController.destroy(); + this.superclass.destroy.call(this); + }; + + 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/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js index 2b2dd25d..12ee1268 100644 --- a/src/js/controller/settings/exportimage/PngExportController.js +++ b/src/js/controller/settings/exportimage/PngExportController.js @@ -24,7 +24,17 @@ ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) { var fileName = this.getPiskelName_() + '.png'; - pskl.utils.BlobUtils.canvasToBlob(this.getFramesheetAsCanvas(), function(blob) { + + var outputCanvas = this.getFramesheetAsCanvas(); + + var scalingFactor = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING); + if (scalingFactor > 1) { + var width = outputCanvas.width * scalingFactor; + var height = outputCanvas.height * scalingFactor; + outputCanvas = pskl.utils.ImageResizer.resize(outputCanvas, width, height, false); + } + + pskl.utils.BlobUtils.canvasToBlob(outputCanvas, function(blob) { pskl.utils.FileUtils.downloadAsFile(blob, fileName); }); }; diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 3fe2f583..27ca4387 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -12,6 +12,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, @@ -26,7 +27,8 @@ 'ORIGINAL_SIZE_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..afc56efe 100644 --- a/src/templates/settings/export.html +++ b/src/templates/settings/export.html @@ -3,15 +3,23 @@ Export Spritesheet