feat: download canvas image

2 files changed, 22 insertions, 7 deletions

diff --git a/index.html b/index.html
index 10049a3..a3ada32 100644
--- a/index.html
+++ b/index.html
@@ -44,10 +44,10 @@
           <h1 class="title">Imagine</h1>
           <h2 class="subtitle">Image Editor</h2>
 
-          <button class="button is-primary">
+          <button id="save" class="button is-primary">
             Save Image
           </button>
-          <button class="button is-secondary">
+          <button id="share" class="button is-secondary">
             Share
           </button>
 
@@ -59,7 +59,7 @@
             <label class="label">Brightness</label>
             <div class="control">
               <input type="range"
-                     id="slider0" 
+                     id="brightness" 
                      class="slider is-fullwidth is-primary" 
                      min="0" max="100" value="50" step="1">
             </div>
@@ -68,7 +68,7 @@
             <label class="label">Saturation</label>
             <div class="control">
               <input type="range"
-                     id="slider0" 
+                     id="saturation" 
                      class="slider is-fullwidth is-primary" 
                      min="0" max="100" value="50" step="1">
             </div>
@@ -77,7 +77,7 @@
             <label class="label">Contrast</label>
             <div class="control">
               <input type="range"
-                     id="slider0" 
+                     id="contrast" 
                      class="slider is-fullwidth is-primary" 
                      min="0" max="100" value="50" step="1">
             </div>
@@ -95,10 +95,10 @@
     <div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
       <span id="settings"></span>
       <a href="#top" class="delete"></a>
-      <button class="button is-primary">
+      <button id="save" class="button is-primary">
         Save Image
       </button>
-      <button class="button is-secondary">
+      <button id="share" class="button is-secondary">
         Share
       </button>
 
diff --git a/main.js b/main.js
index 95c0558..6953ee5 100644
--- a/main.js
+++ b/main.js
@@ -6,6 +6,10 @@ document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("take-picture").addEventListener("click", take_picture);
   document.getElementById("upload-image").addEventListener("change", upload_image)
 
+  
+  document.getElementById("save").addEventListener("click", save_image)
+  document.getElementById("share").addEventListener("click", share_image)
+
   canvas = document.getElementById("myCanvas");
   imports = document.getElementById("imports");
 })
@@ -31,4 +35,15 @@ function upload_image(event) {
   }
 }
 
+function save_image() {
+  const dataUrl = canvas.toDataURL("image/png");
+  // downloading only works with links but not window.open
+  const link = document.createElement('a');
+  link.href = dataUrl;
+  link.download = 'imagine.png';
+  link.click();
+}
+
+function share_image() {
 
+}