Implement image selector

src/components/ImageEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { grayScale } from "../processing/gray-scale.ts";
+import ImageCollection from "./ImageCollection.vue";
 
 const canvas = ref<HTMLCanvasElement | null>(null)
 let ctx: CanvasRenderingContext2D;
@@ -8,25 +9,28 @@ 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]);
+function onSelected(img: HTMLImageElement): void {
+  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);
 }
 </script>
 
 <template>
-  <input type="file" @change="onFileChange">
-  <canvas ref="canvas" width="500" height="500"></canvas>
+  <div class="editor">
+    <ImageCollection @selected="onSelected" />
+    <canvas ref="canvas" width="500" height="500"></canvas>
+  </div>
 </template>
+
+<style>
+.editor {
+  display: flex;
+  box-shadow: 0 0 2px 2px #1a1a1a;
+}
+canvas {
+  flex-grow: 1;
+}
+</style>