add grayScale effect

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>