From 030cc18638f08d5731ec5cb7a4cd926c50b73782 Mon Sep 17 00:00:00 2001
From: bastien ollier <bastien.ollier@etu.uca.fr>
Date: Thu, 8 Feb 2024 08:52:50 +0100
Subject: [PATCH] add grayScale effect

---
 src/components/ImageEditor.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue
index 4634a43..813b390 100644
--- a/src/components/ImageEditor.vue
+++ b/src/components/ImageEditor.vue
@@ -16,17 +16,26 @@ function onFileChange(event: Event) {
     img.onload = () => {
       ctx.drawImage(img, 0, 0);
       const imageData = ctx.getImageData(0, 0, img.width, img.height);
-      const pixels = imageData.data;
-      grayScale(pixels);
       ctx.putImageData(imageData, 0, 0);
     }
     img.src = event.target!.result as string;
   }
   reader.readAsDataURL(files[0]);
 }
+
+function grayScaleApply() {
+    console.log("test");
+    const ctx = canvas.value!.getContext('2d')!;
+    const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
+    const pixels = imageData.data;
+    grayScale(pixels);
+    ctx.putImageData(imageData, 0, 0);
+}
+
 </script>
 
 <template>
   <input type="file" @change="onFileChange">
+  <button @click="grayScaleApply">grayScale</button>
   <canvas ref="canvas" width="500" height="500"></canvas>
 </template>