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 1/3] 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>

From 1969ad396fcd70bf8efd384e7ff4c57cbf66f5dc Mon Sep 17 00:00:00 2001
From: bastien ollier <bastien.ollier@etu.uca.fr>
Date: Thu, 8 Feb 2024 09:33:38 +0100
Subject: [PATCH 2/3] add resize

---
 src/components/ImageEditor.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue
index 813b390..43b1d48 100644
--- a/src/components/ImageEditor.vue
+++ b/src/components/ImageEditor.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { HtmlHTMLAttributes, onMounted, ref } from 'vue';
 import { grayScale } from "../processing/gray-scale.ts";
 
-const canvas = ref<HTMLCanvasElement | null>(null)
+const canvas = ref<HTMLCanvasElement | null>(null);
+let img: HTMLImageElement;
 let ctx: CanvasRenderingContext2D;
 onMounted(() => {
   ctx = canvas.value!.getContext('2d')!;
@@ -12,7 +13,7 @@ function onFileChange(event: Event) {
   const files = (event.target as HTMLInputElement).files!;
   const reader = new FileReader();
   reader.onload = function(event) {
-    const img = new Image();
+    img = new Image();
     img.onload = () => {
       ctx.drawImage(img, 0, 0);
       const imageData = ctx.getImageData(0, 0, img.width, img.height);
@@ -30,12 +31,31 @@ function grayScaleApply() {
     const pixels = imageData.data;
     grayScale(pixels);
     ctx.putImageData(imageData, 0, 0);
+
 }
 
+function onChangeSlideWidth(event: Event) {
+  const slider = event.target as HTMLInputElement;
+  const width = parseInt(slider.value)/100 * img.width;
+
+  canvas.value!.width = width;
+  ctx.drawImage(img, 0, 0, width, canvas.value!.height);
+} 
+
+function onChangeSlideHeight(event: Event) {
+  const slider = event.target as HTMLInputElement;
+  const height = parseInt(slider.value)/100 * img.width;
+
+  canvas.value!.height = height;
+  ctx.drawImage(img, 0, 0, canvas.value!.width, height);
+} 
+
 </script>
 
 <template>
   <input type="file" @change="onFileChange">
   <button @click="grayScaleApply">grayScale</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">
 </template>

From 563760bb25d1a52db9d6a3055cdcdd809c2e5f98 Mon Sep 17 00:00:00 2001
From: bastien ollier <bastien.ollier@etu.uca.fr>
Date: Thu, 8 Feb 2024 09:46:20 +0100
Subject: [PATCH 3/3] add black and white effect

---
 src/components/ImageEditor.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue
index 43b1d48..7f1aab5 100644
--- a/src/components/ImageEditor.vue
+++ b/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">