<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { grayScale } from "../processing/gray-scale.ts";

const canvas = ref<HTMLCanvasElement | null>(null)
let ctx: CanvasRenderingContext2D;
onMounted(() => {
  ctx = canvas.value!.getContext('2d')!;
})

function onFileChange(event: Event) {
  const files = (event.target as HTMLInputElement).files!;
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = new Image();
    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]);
}
</script>

<template>
  <input type="file" @change="onFileChange">
  <canvas ref="canvas" width="500" height="500"></canvas>
</template>
