add black and white effect

src/components/ImageEditor.vue

@@ -25,7 +25,6 @@ function onFileChange(event: Event) {
 }
 
 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;
@@ -34,6 +33,29 @@ function grayScaleApply() {
 
 }
 
+function blackAndWhite(){
+  ctx.drawImage(img, 0, 0, canvas.value!.width, canvas.value!.height);
+
+  let imgPixels = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
+  for(let y = 0; y < imgPixels.height; y++){
+      for(let x = 0; x < imgPixels.width; x++){
+          let i = (y * 4) * imgPixels.width + x * 4;
+          let avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
+          if (avg < 150){
+            imgPixels.data[i] = 0;
+            imgPixels.data[i + 1] = 0;
+            imgPixels.data[i + 2] = 0;
+          }
+          else{
+            imgPixels.data[i] = 255;
+            imgPixels.data[i + 1] = 255;
+            imgPixels.data[i + 2] = 255;
+          }
+      }
+  }
+  ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
+}
+
 function onChangeSlideWidth(event: Event) {
   const slider = event.target as HTMLInputElement;
   const width = parseInt(slider.value)/100 * img.width;
@@ -55,6 +77,7 @@ function onChangeSlideHeight(event: Event) {
 <template>
   <input type="file" @change="onFileChange">
   <button @click="grayScaleApply">grayScale</button>
+  <button @click="blackAndWhite">blackAndWhite</button>
   <canvas ref="canvas" width="500" height="500"></canvas>
   <input type="range" min="1" max="200" value="100" class="slider" id="myRange" @change="onChangeSlideWidth">
   <input type="range" min="1" max="200" value="100" class="slider" id="myRange" @change="onChangeSlideHeight" orient="vertical">