Added image downloading buttons

#13
generic-github-user · Oct 14, 2018 · e209303 · e209303
1 parent 3c3da9d
commit e209303
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 16 deletions.
diff --git a/src/index.html b/src/index.html
@@ -128,15 +128,38 @@ <h5 id="kernel-weight-position"></h5>
             </div>
             <!-- Canvases to display images on -->
             <div id="canvases">
-                  <!-- Unfiltered input image -->
-                  <canvas id="input"></canvas>
-                  <div class="mdl-tooltip" data-mdl-for="input">
-                        Input image
+                  <div id="input-canvas">
+                        <!-- Unfiltered input image -->
+                        <canvas id="input"></canvas>
+                        <div class="mdl-tooltip" data-mdl-for="input">
+                              Input image
+                        </div>
+
+                        <!-- Input image save button -->
+                        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--accent" id="save-input">
+                              <i class="material-icons">save</i>
+                        </button>
+                        <!-- Input image save tooltip -->
+                        <div class="mdl-tooltip" data-mdl-for="save-input">
+                              Download input image
+                        </div>
                   </div>
-                  <!-- Output image with convolutional filter applied -->
-                  <canvas id="output"></canvas>
-                  <div class="mdl-tooltip" data-mdl-for="output">
-                        Output image
+
+                  <div id="output-canvas">
+                        <!-- Output image with convolutional filter applied -->
+                        <canvas id="output"></canvas>
+                        <div class="mdl-tooltip" data-mdl-for="output">
+                              Output image
+                        </div>
+
+                        <!-- Output image save button -->
+                        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--accent" id="save-output">
+                              <i class="material-icons">save</i>
+                        </button>
+                        <!-- Output image save tooltip -->
+                        <div class="mdl-tooltip" data-mdl-for="save-output">
+                              Download output image
+                        </div>
                   </div>
             </div>
       </div>

diff --git a/src/js/script.js b/src/js/script.js
@@ -112,6 +112,11 @@ const randomize = function() {
       console.log("Kernel weight values randomized", kernels[custom]);
 }
 
+const download_canvas = function(canvas) {
+      var data = canvas.toDataURL("image/png");
+      download(data, "image.png", "image/png");
+}
+
 // Change resolution of images
 const set_resolution = function(func) {
       // Get resolution from slider element
@@ -178,13 +183,25 @@ const display_snackbar = function(message, time) {
       var snackbarContainer = $("#snackbar");
       snackbarContainer[0].MaterialSnackbar.showSnackbar(data);
 }
-$("dialog#load-image-url .confirm").click(() => {
-      load_image({
-            url: $("dialog#load-image-url input")[0].value,
-            callback: set_filter
-      });
-      display_snackbar("Image loaded.", 5);
-});
+$("dialog#load-image-url .confirm").click(
+      () => {
+            load_image({
+                  url: $("dialog#load-image-url input")[0].value,
+                  callback: set_filter
+            });
+            display_snackbar("Image loaded.", 5);
+      }
+);
+$("#save-input").click(
+      () => {
+            download_canvas($("canvas#input")[0]);
+      }
+);
+$("#save-output").click(
+      () => {
+            download_canvas($("canvas#output")[0]);
+      }
+);
 
 // Adapted from https://stackoverflow.com/a/22369599
 const read_file = function() {

diff --git a/src/style.css b/src/style.css
@@ -59,7 +59,8 @@ header:hover>#subtitle {
 }
 
 canvas {
-      width: 49%;
+      width: 100%;
+      margin-bottom: 5%;
       image-rendering: pixelated;
       box-shadow: 4px 4px 4px #AAA;
       transition: 1s all ease;
@@ -96,6 +97,18 @@ input#load-image-upload {
       position: absolute;
 }
 
+#input-canvas, #output-canvas {
+      width: 50%;
+}
+
+#input-canvas {
+      float: left;
+}
+
+#output-canvas {
+      float: left;
+}
+
 #kernel-vis {
       width: 50%;
       float: left;