add resize

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>