From 5ebf83badfb606c78575f1a07befb3a6a4dd8de4 Mon Sep 17 00:00:00 2001
From: Jordan Watkins <jordanjwatkins@gmail.com>
Date: Wed, 17 Oct 2018 22:12:01 -0700
Subject: [PATCH] Add inline image option for PixiJS Movie export

---
 .../settings/exportimage/PngExportController.js    | 14 ++++++++++++--
 src/templates/settings/export/png.html             |  4 ++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js
index 3e959d48..11705eae 100644
--- a/src/js/controller/settings/exportimage/PngExportController.js
+++ b/src/js/controller/settings/exportimage/PngExportController.js
@@ -33,6 +33,8 @@
     var dataUriButton = document.querySelector('.datauri-open-button');
     var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
 
+    this.pixiInlineImageCheckbox = document.querySelector('.png-pixi-inline-image-checkbox');
+
     this.initLayoutSection_();
     this.updateDimensionLabel_();
 
@@ -169,7 +171,15 @@
     var canvas = this.createPngSpritesheet_();
     var name = this.piskelController.getPiskel().getDescriptor().name;
 
-    zip.file(name + '.png', pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
+    var image;
+
+    if (this.pixiInlineImageCheckbox.checked) {
+      image = canvas.toDataURL('image/png');
+    } else {
+      image = name + '.png';
+
+      zip.file(image, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
+    }
 
     var width = canvas.width / this.getColumns_();
     var height = canvas.height / this.getRows_();
@@ -194,7 +204,7 @@
       'meta': {
         'app': 'https://github.com/piskelapp/piskel/',
         'version': '1.0',
-        'image': name + '.png',
+        'image': image,
         'format': 'RGBA8888',
         'size': {'w': canvas.width,'h': canvas.height}
       }
diff --git a/src/templates/settings/export/png.html b/src/templates/settings/export/png.html
index 85bd20b0..5b7e244f 100644
--- a/src/templates/settings/export/png.html
+++ b/src/templates/settings/export/png.html
@@ -37,6 +37,10 @@
       <div style="padding-bottom: 5px">
         <span class="highlight export-panel-row">PixiJS Movie export: </span>
       </div>
+      <div class="checkbox-container" style="margin: 5px 0;">
+        <input id="png-pixi-inline-image" class="png-pixi-inline-image-checkbox checkbox-fix" type="checkbox" />
+        <label for="png-pixi-inline-image">Inline spritesheet as data-uri</label>
+      </div>
       <div class="export-panel-row">
         <button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
         <span class="export-info">Spritesheet with JSON metadata</span>