Merge branch 'effect'

src/components/ImageCollection.vue

@@ -22,7 +22,7 @@ function onFileChange(event: Event): void {
 <template>
   <div class="file-column">
     <input id="file-upload" type="file" @change="onFileChange">
-    <label for="file-upload"><a class="button" style="display: block">Add</a></label>
+    <label for="file-upload" class="button">Add</label>
     <div v-for="(img, idx) in images" :key="idx" class="image-file">
       <img :src="img.src" width="64" height="64" alt="" @click="$emit('selected', img)">
     </div>
@@ -36,7 +36,7 @@ function onFileChange(event: Event): void {
 .file-column {
   display: flex;
   flex-direction: column;
-  padding: 8px;
+  padding: 8px 16px 8px 8px;
-  border-right: 1px solid black;
+  border-right: 2px solid #1a1a1a;
 }
 </style>

src/components/ImageEditor.vue

@@ -1,27 +1,74 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { grayScale } from "../processing/gray-scale.ts";
+import { blackAndWhite, grayScale } from '../processing/gray-scale.ts';
-import ImageCollection from "./ImageCollection.vue";
+import ImageCollection from './ImageCollection.vue';
 
-const canvas = ref<HTMLCanvasElement | null>(null)
+const canvas = ref<HTMLCanvasElement | null>(null);
+const currentWidth = ref(100);
+const currentHeight = ref(100);
+let img: HTMLImageElement;
 let ctx: CanvasRenderingContext2D;
 onMounted(() => {
   ctx = canvas.value!.getContext('2d')!;
 })
 
-function onSelected(img: HTMLImageElement): void {
+function onSelected(image: HTMLImageElement): void {
-  ctx.drawImage(img, 0, 0);
+  canvas.value!.width = image.width;
-  const imageData = ctx.getImageData(0, 0, img.width, img.height);
+  canvas.value!.height = image.height;
+  ctx.drawImage(image, 0, 0);
+  img = image;
+}
+
+function grayScaleApply() {
+  const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
   const pixels = imageData.data;
   grayScale(pixels);
   ctx.putImageData(imageData, 0, 0);
 }
+
+function blackAndWhiteApply() {
+  const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
+  const pixels = imageData.data;
+  blackAndWhite(pixels);
+  ctx.putImageData(imageData, 0, 0);
+}
+
+function onChangeSlideWidth() {
+  const width = currentWidth.value / 100 * img.width;
+  canvas.value!.width = width;
+  ctx.drawImage(img, 0, 0, width, canvas.value!.height);
+} 
+
+function onChangeSlideHeight() {
+  const height = currentHeight.value / 100 * img.height;
+  canvas.value!.height = height;
+  ctx.drawImage(img, 0, 0, canvas.value!.width, height);
+}
 </script>
 
 <template>
   <div class="editor">
     <ImageCollection @selected="onSelected" />
-    <canvas ref="canvas" width="500" height="500"></canvas>
+    <div class="working-area">
+      <div class="options">
+        <button @click="blackAndWhiteApply">
+          Black and white
+        </button>
+        <button @click="grayScaleApply">
+          Gray-scale
+        </button>
+      </div>
+      <div class="inner">
+        <input v-model="currentHeight" type="range" min="1" max="200" value="100" orient="vertical" @change="onChangeSlideHeight">
+        <div class="preview">
+          <canvas ref="canvas"></canvas>
+        </div>
+      </div>
+      <div class="controls">
+        <input id="image-width" v-model="currentWidth" type="range" min="1" max="200" @change="onChangeSlideWidth">
+        <output for="image-width">{{ currentWidth }}%</output>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -29,8 +76,33 @@ function onSelected(img: HTMLImageElement): void {
 .editor {
   display: flex;
   box-shadow: 0 0 2px 2px #1a1a1a;
+  padding: 8px;
+  height: calc(100vh - 96px);
+}
+.working-area {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.inner {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}
+.preview {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 canvas {
-  flex-grow: 1;
+  max-width: 100%;
+  max-height: 100%;
+}
+input[type=range][orient=vertical] {
+  appearance: slider-vertical;
+}
+output {
+  vertical-align: top;
 }
 </style>

src/processing/gray-scale.ts

@@ -7,3 +7,13 @@ export function grayScale(pixels: Uint8ClampedArray): void {
         pixels[i + 2] = lightness;
     }
 }
+
+export function blackAndWhite(pixels: Uint8ClampedArray): void {
+    for (let i = 0; i < pixels.length; i += 4) {
+        const lightness = (pixels[i] * .299 + pixels[i + 1] * .587 + pixels[i + 2] * .114) | 0;
+        const value = lightness < 128 ? 0 : 255;
+        pixels[i] = value;
+        pixels[i + 1] = value;
+        pixels[i + 2] = value;
+    }
+}

src/style.css

@@ -64,6 +64,7 @@ button:focus-visible,
 }
 
 #app {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;