Fix : Export to GIF : download option

In the GIF export panel, user can now choose between :
- export online (previous 'upload' feature)
- download GIF

Labels have been updated in the PNG export panel to follow the same
convention.

CanvasToBlob library was modified and moved to dedicated utils to handle
not only canvas, but also any base64 dateURI.

src/js/controller/settings/GifExportController.js

@@ -34,8 +34,13 @@
     this.previewContainerEl = document.querySelector(".gif-export-preview");
     this.radioGroupEl = document.querySelector(".gif-export-radio-group");
 
-    this.uploadForm = $("[name=gif-export-upload-form]");
-    this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
+    this.uploadButton = $(".gif-upload-button");
+    this.uploadButton.click(this.onUploadButtonClick_.bind(this));
+
+    this.downloadButton = $(".gif-download-button");
+    this.downloadButton.click(this.onDownloadButtonClick_.bind(this));
+
+    this.exportForm = $(".gif-export-form");
 
     this.exportProgressStatusEl = document.querySelector('.gif-export-progress-status');
     this.exportProgressBarEl = document.querySelector('.gif-export-progress-bar');
@@ -43,15 +48,27 @@
     this.createRadioElements_();
   };
 
-  ns.GifExportController.prototype.onUploadFormSubmit_ = function (evt) {
+  ns.GifExportController.prototype.onUploadButtonClick_ = function (evt) {
     evt.originalEvent.preventDefault();
-    var selectedZoom = this.getSelectedZoom_(),
-        fps = this.piskelController.getFPS(),
-        zoom = selectedZoom;
+    var zoom = this.getSelectedZoom_(),
+        fps = this.piskelController.getFPS();
 
     this.renderAsImageDataAnimatedGIF(zoom, fps, this.onGifRenderingCompleted_.bind(this));
   };
 
+  ns.GifExportController.prototype.onDownloadButtonClick_ = function (evt) {
+    var fileName = this.piskelController.getPiskel().getDescriptor().name + '.gif';
+    var zoom = this.getSelectedZoom_(),
+        fps = this.piskelController.getFPS();
+
+    this.renderAsImageDataAnimatedGIF(zoom, fps, function (imageData) {
+      pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
+      pskl.utils.ImageToBlob.imageDataToBlob(imageData, "image/gif", function(blob) {
+        pskl.utils.FileUtils.downloadAsFile(fileName, blob);
+      });
+    }.bind(this));
+  };
+
   ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
     this.updatePreview_(imageData);
     this.previewContainerEl.classList.add("preview-upload-ongoing");
@@ -62,7 +79,6 @@
     this.updatePreview_(imageUrl);
     this.updateStatus_(imageUrl);
     this.previewContainerEl.classList.remove("preview-upload-ongoing");
-
   };
 
   ns.GifExportController.prototype.updatePreview_ = function (src) {
@@ -70,7 +86,7 @@
   };
 
   ns.GifExportController.prototype.getSelectedZoom_ = function () {
-    var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-zoom-level]"),
+    var radiosColl = this.exportForm.get(0).querySelectorAll("[name=gif-zoom-level]"),
         radios = Array.prototype.slice.call(radiosColl,0);
     var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
 
@@ -105,15 +121,6 @@
     return radioEl;
   };
 
-  ns.GifExportController.prototype.blobToBase64_ = function(blob, cb) {
-    var reader = new FileReader();
-    reader.onload = function() {
-      var dataUrl = reader.result;
-      cb(dataUrl);
-    };
-    reader.readAsDataURL(blob);
-  };
-
   ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
     var colorCount = pskl.app.currentColorsService.getCurrentColors().length;
     var preserveColors = colorCount < MAX_GIF_COLORS;
@@ -140,7 +147,7 @@
 
     gif.on('finished', function(blob) {
       this.hideProgressStatus_();
-      this.blobToBase64_(blob, cb);
+      pskl.utils.FileUtils.readFile(blob, cb);
     }.bind(this));
 
     gif.render();

src/js/controller/settings/PngExportController.js

@@ -16,21 +16,19 @@
 
     document.querySelector(".zip-generate-button").addEventListener('click', this.onZipButtonClick_.bind(this));
 
-    this.updatePreview_(this.getFramesheetAsBase64Png());
+    this.setPreviewSrc_(this.getFramesheetAsCanvas().toDataURL("image/png"));
   };
 
   ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
     var fileName = this.getPiskelName_() + '.png';
-    var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
-    var canvas = renderer.renderAsCanvas();
-    canvas.toBlob(function(blob) {
+    pskl.utils.ImageToBlob.canvasToBlob(this.getFramesheetAsCanvas(), function(blob) {
       pskl.utils.FileUtils.downloadAsFile(fileName, blob);
     });
   };
 
   ns.PngExportController.prototype.onPngUploadButtonClick_ = function (evt) {
     this.previewContainerEl.classList.add("preview-upload-ongoing");
-    pskl.app.imageUploadService.upload(this.getFramesheetAsBase64Png(), this.onImageUploadCompleted_.bind(this));
+    pskl.app.imageUploadService.upload(this.getFramesheetAsCanvas().toDataURL("image/png"), this.onImageUploadCompleted_.bind(this));
   };
 
   ns.PngExportController.prototype.onZipButtonClick_ = function () {
@@ -59,10 +57,9 @@
     return this.piskelController.getPiskel().getDescriptor().name;
   };
 
-  ns.PngExportController.prototype.getFramesheetAsBase64Png = function () {
+  ns.PngExportController.prototype.getFramesheetAsCanvas = function () {
     var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
-    var framesheetCanvas = renderer.renderAsCanvas();
-    return framesheetCanvas.toDataURL("image/png");
+    return renderer.renderAsCanvas();
   };
 
   ns.PngExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
@@ -84,7 +81,7 @@
     }
   };
 
-  ns.PngExportController.prototype.updatePreview_ = function (src) {
+  ns.PngExportController.prototype.setPreviewSrc_ = function (src) {
     this.previewContainerEl.innerHTML = "<img class='light-picker-background' style='max-width:240px;' src='"+src+"'/>";
   };
 

src/js/controller/settings/SaveController.js

@@ -49,7 +49,7 @@
     this.piskelController.getPiskel().setDescriptor(descriptor);
 
     this.beforeSaving_();
-    pskl.app.store({
+    pskl.app.storageService.store({
       success : this.onSaveSuccess_.bind(this),
       error : this.onSaveError_.bind(this),
       after : this.afterSaving_.bind(this)