Use the canvas scaling API to preserve applied transformations

src/components/ImageEditor.vue

@@ -3,13 +3,14 @@ import { onMounted, ref } from 'vue';
 import { blackAndWhite, grayScale } from '../processing/gray-scale.ts';
 import ImageCollection from './ImageCollection.vue';
 import { mergeImages } from '../processing/merge.ts';
+import { drawOffscreen } from '../processing/offscreen.ts';
 
 const canvas = ref<HTMLCanvasElement | null>(null);
 const collection = ref<typeof ImageCollection>();
 const overlay = ref<string | null>(null);
 const currentWidth = ref(100);
 const currentHeight = ref(100);
-let img: HTMLImageElement;
+let viable = new ImageData(1, 1);
 let ctx: CanvasRenderingContext2D;
 onMounted(() => {
   ctx = canvas.value!.getContext('2d')!;
@@ -19,33 +20,45 @@ function onSelected(image: HTMLImageElement): void {
   canvas.value!.width = image.width;
   canvas.value!.height = image.height;
   ctx.drawImage(image, 0, 0);
-  img = image;
+  viable = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
 }
 
 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);
+  draw(imageData);
 }
 
 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);
+  draw(imageData);
 }
 
 function onChangeSlideWidth() {
-  const width = currentWidth.value / 100 * img.width;
+  const newCanvas = drawOffscreen(viable);
-  canvas.value!.width = width;
+  canvas.value!.width = viable.width * currentWidth.value / 100;
-  ctx.drawImage(img, 0, 0, width, canvas.value!.height);
+  drawScaled(newCanvas);
-} 
+}
 
 function onChangeSlideHeight() {
-  const height = currentHeight.value / 100 * img.height;
+  const newCanvas = drawOffscreen(viable);
-  canvas.value!.height = height;
+  canvas.value!.height = viable.height * currentHeight.value / 100;
-  ctx.drawImage(img, 0, 0, canvas.value!.width, height);
+  drawScaled(newCanvas);
+}
+
+function drawScaled(newCanvas: OffscreenCanvas) {
+  ctx.scale(currentWidth.value / 100, currentHeight.value / 100);
+  ctx.drawImage(newCanvas, 0, 0);
+}
+
+function draw(data: ImageData) {
+  ctx.putImageData(data, 0, 0);
+  currentWidth.value = 100;
+  currentHeight.value = 100;
+  viable = data;
 }
 
 function onDragOver(event: DragEvent) {
@@ -104,14 +117,14 @@ function onDragLeave() {
         </button>
       </div>
       <div class="inner">
-        <input v-model="currentHeight" type="range" min="1" max="200" value="100" orient="vertical" @change="onChangeSlideHeight">
+        <input v-model="currentHeight" type="range" min="5" max="200" value="100" orient="vertical" @change="onChangeSlideHeight">
         <div class="preview" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
           <canvas ref="canvas"></canvas>
           <div v-if="overlay" :class="`overlay overlay-${overlay}`"></div>
         </div>
       </div>
       <div class="controls">
-        <input id="image-width" v-model="currentWidth" type="range" min="1" max="200" @change="onChangeSlideWidth">
+        <input id="image-width" v-model="currentWidth" type="range" min="5" max="200" @change="onChangeSlideWidth">
         <output for="image-width">{{ currentWidth }}%</output>
       </div>
     </div>

src/processing/offscreen.ts

@@ -0,0 +1,6 @@
+export function drawOffscreen(data: ImageData): OffscreenCanvas {
+  const newCanvas = new OffscreenCanvas(data.width, data.height);
+  const newCtx = newCanvas.getContext('2d')!;
+  newCtx.putImageData(data, 0, 0);
+  return newCanvas;
+}