feat: apply image filters

2 files changed, 84 insertions, 28 deletions

diff --git a/index.html b/index.html
index a3ada32..048f3fb 100644
--- a/index.html
+++ b/index.html
@@ -60,17 +60,17 @@
             <div class="control">
               <input type="range"
                      id="brightness" 
-                     class="slider is-fullwidth is-primary" 
-                     min="0" max="100" value="50" step="1">
+                     class="brightness slider is-fullwidth is-primary" 
+                     min="0" max="2" value="1" step="0.1">
             </div>
           </div>
           <div class="field">
             <label class="label">Saturation</label>
             <div class="control">
               <input type="range"
-                     id="saturation" 
-                     class="slider is-fullwidth is-primary" 
-                     min="0" max="100" value="50" step="1">
+                     id="saturate" 
+                     class="saturate slider is-fullwidth is-primary" 
+                     min="0" max="2" value="1" step="0.1">
             </div>
           </div>
           <div class="field">
@@ -78,8 +78,8 @@
             <div class="control">
               <input type="range"
                      id="contrast" 
-                     class="slider is-fullwidth is-primary" 
-                     min="0" max="100" value="50" step="1">
+                     class="contrast slider is-fullwidth is-primary" 
+                     min="0" max="2" value="1" step="0.1">
             </div>
           </div>
 
@@ -89,6 +89,15 @@
           <p class="menu-label">
             Blur and Sharpen
           </p>
+          <div class="field">
+            <label class="label">Blur</label>
+            <div class="control">
+              <input type="range"
+                     id="blur" 
+                     class="blur slider is-fullwidth is-primary" 
+                     min="0" max="20" value="0" step="1">
+            </div>
+          </div>
         </aside>
       </div>
     </div>
@@ -103,43 +112,52 @@
       </button>
 
       <p class="menu-label">
-        Color Correction
+      Color Correction
       </p>
 
       <div class="field">
         <label class="label">Brightness</label>
         <div class="control">
           <input type="range"
-                 id="slider0" 
-                 class="slider is-fullwidth is-primary" 
-                 min="0" max="100" value="50" step="1">
+                 id="brightness" 
+                 class="brightness slider is-fullwidth is-primary" 
+                 min="0" max="2" value="1" step="0.1">
         </div>
       </div>
       <div class="field">
         <label class="label">Saturation</label>
         <div class="control">
           <input type="range"
-                 id="slider0" 
-                 class="slider is-fullwidth is-primary" 
-                 min="0" max="100" value="50" step="1">
+                 id="saturate" 
+                 class="saturate slider is-fullwidth is-primary" 
+                 min="0" max="2" value="1" step="0.1">
         </div>
       </div>
       <div class="field">
         <label class="label">Contrast</label>
         <div class="control">
           <input type="range"
-                 id="slider0" 
-                 class="slider is-fullwidth is-primary" 
-                 min="0" max="100" value="50" step="1">
+                 id="contrast" 
+                 class="contrast slider is-fullwidth is-primary" 
+                 min="0" max="2" value="1" step="0.1">
         </div>
       </div>
 
       <p class="menu-label">
-        Distortion
+      Distortion
       </p>
       <p class="menu-label">
-        Blur and Sharpen
+      Blur and Sharpen
       </p>
+      <div class="field">
+        <label class="label">Blur</label>
+        <div class="control">
+          <input type="range"
+                 id="blur" 
+                 class="blur slider is-fullwidth is-primary" 
+                 min="0" max="20" value="0" step="1">
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/main.js b/main.js
index 6953ee5..d5580af 100644
--- a/main.js
+++ b/main.js
@@ -1,17 +1,37 @@
-let canvas, imports;
+let canvas;
+let ctx;
+let imports;
+let settings = {
+  brightness: {},
+  saturate: {},
+  contrast: {},
+  blur: {prefix: 'px'}
+};
+const img = new Image();
 
 // wait for site to be parsed so element can be found
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", function() {
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  imports = document.getElementById("imports");
+
   // bind listeners
   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");
+  for (let setting in settings) {
+    // make an array out of an iterable
+    const elements = [...document.getElementsByClassName(setting)];
+    settings[setting].elements = elements;
+    for (let element of elements) {
+      element.addEventListener("input", settings_apply);
+    }
+  }
+
 })
 
 function take_picture() {
@@ -20,18 +40,16 @@ function take_picture() {
 
 }
 
-function upload_image(event) {
+function upload_image() {
   canvas.classList.remove("is-hidden");
   imports.classList.add("is-hidden");
   console.log(this.files[0]);
 
-  const img = new Image();
-  const ctx = canvas.getContext("2d");
   img.src = URL.createObjectURL(this.files[0]);
   img.onload = function() {
     canvas.width = img.naturalWidth;
     canvas.height = img.naturalHeight;
-    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   }
 }
 
@@ -47,3 +65,23 @@ function save_image() {
 function share_image() {
 
 }
+
+function settings_apply(event) {
+  const changed_setting = event.target.id;
+  const new_value = event.target.value;
+
+  // update all inputs for that setting (mobile and desktop) to the new value
+  for (let element of settings[changed_setting].elements) {
+    if (element == event.target) continue;
+    element.value = new_value;
+  }
+
+  const filter = Object.entries(settings)
+    .map(([setting, {elements, prefix}]) => `${setting}(${elements[0].value}${prefix || ""})`)
+    .join(" ")
+
+  ctx.filter = filter
+  console.log(filter);
+
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+}