Update script.js

script.js

@@ -1,13 +1,51 @@
-const fileInput = document.getElementById("fileInput");
-const preview = document.getElementById("preview");
-
-fileInput.addEventListener("change", (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-        preview.src = e.target.result;
-    };
-    reader.readAsDataURL(file);
-});
+let img = new Image();
+let canvas = document.getElementById("canvas");
+let ctx = canvas.getContext("2d");
+
+document.getElementById("upload").onchange = e => {
+  let file = e.target.files[0];
+  img.src = URL.createObjectURL(file);
+  
+  img.onload = () => {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    draw();
+  }
+};
+
+function draw() {
+  ctx.filter = `
+    brightness(${document.getElementById("brightness").value}%)
+    contrast(${document.getElementById("contrast").value}%)
+    blur(${document.getElementById("blur").value}px)
+    grayscale(${document.getElementById("gray").value}%)
+  `;
+  
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+  let sharpenValue = document.getElementById("sharpen").value;
+  if (sharpenValue > 0) applySharpen(sharpenValue);
+}
+
+function applySharpen(amount) {
+  let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  let pixels = imgData.data;
+
+  for (let i = 0; i < pixels.length; i+=4) {
+    pixels[i] = pixels[i] + amount * 10;
+    pixels[i+1] = pixels[i+1] + amount * 10;
+    pixels[i+2] = pixels[i+2] + amount * 10;
+  }
+  ctx.putImageData(imgData, 0, 0);
+}
+
+document.querySelectorAll("input[type=range]").forEach(r => {
+  r.oninput = draw;
+});
+
+document.getElementById("download").onclick = () => {
+  let link = document.createElement("a");
+  link.download = "edited.png";
+  link.href = canvas.toDataURL();
+  link.click();
+};