33 lines
927 B
Vue
33 lines
927 B
Vue
<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>
|