feat: apply image filters

index.html

@@ -60,17 +60,17 @@
             <div class="control">
               <input type="range"
                      id="brightness" 
-                     class="slider is-fullwidth is-primary" 
+                     class="brightness slider is-fullwidth is-primary" 
-                     min="0" max="100" value="50" step="1">
+                     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" 
+                     id="saturate" 
-                     class="slider is-fullwidth is-primary" 
+                     class="saturate slider is-fullwidth is-primary" 
-                     min="0" max="100" value="50" step="1">
+                     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" 
+                     class="contrast slider is-fullwidth is-primary" 
-                     min="0" max="100" value="50" step="1">
+                     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>
@@ -110,27 +119,27 @@
         <label class="label">Brightness</label>
         <div class="control">
           <input type="range"
-                 id="slider0" 
+                 id="brightness" 
-                 class="slider is-fullwidth is-primary" 
+                 class="brightness slider is-fullwidth is-primary" 
-                 min="0" max="100" value="50" step="1">
+                 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" 
+                 id="saturate" 
-                 class="slider is-fullwidth is-primary" 
+                 class="saturate slider is-fullwidth is-primary" 
-                 min="0" max="100" value="50" step="1">
+                 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" 
+                 id="contrast" 
-                 class="slider is-fullwidth is-primary" 
+                 class="contrast slider is-fullwidth is-primary" 
-                 min="0" max="100" value="50" step="1">
+                 min="0" max="2" value="1" step="0.1">
         </div>
       </div>
 
@@ -140,6 +149,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>
     </div>
   </body>
 </html>

main.js

@@ -1,7 +1,20 @@
-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() {
+  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)
@@ -10,8 +23,15 @@ document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("save").addEventListener("click", save_image)
   document.getElementById("share").addEventListener("click", share_image)
 
-  canvas = document.getElementById("myCanvas");
+  for (let setting in settings) {
-  imports = document.getElementById("imports");
+    // 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,13 +40,11 @@ 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;
@@ -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);
+}