Allow blending two images together

src/components/ImageEditor.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { blackAndWhite, grayScale } from '../processing/gray-scale.ts';
 import ImageCollection from './ImageCollection.vue';
+import { mergeImages } from '../processing/merge.ts';
 
 const canvas = ref<HTMLCanvasElement | null>(null);
 const collection = ref<typeof ImageCollection>();
@@ -52,8 +53,10 @@ function onDragOver(event: DragEvent) {
   event.dataTransfer!.dropEffect = 'copy';
   if (event.offsetX > canvas.value!.width / 2) {
     overlay.value = 'right';
-  } else {
+  } else if (event.offsetY > canvas.value!.height / 2) {
     overlay.value = 'bottom';
+  } else {
+    overlay.value = ' ';
   }
 }
 
@@ -68,12 +71,18 @@ function onDrop(event: DragEvent) {
     canvas.value!.width += img.width;
     ctx.putImageData(imageData, 0, 0)
     ctx.drawImage(img, dx, 0);
-  } else {
+  } else if (event.offsetY > canvas.value!.height / 2) {
     const dy = canvas.value!.height;
     const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
     canvas.value!.height += img.height;
     ctx.putImageData(imageData, 0, 0)
     ctx.drawImage(img, 0, dy);
+  } else {
+    const current = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height).data;
+    ctx.drawImage(img, 0, 0);
+    const merged = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
+    mergeImages(current, merged.data);
+    ctx.putImageData(merged, 0, 0);
   }
 }
 

src/processing/merge.ts

@@ -0,0 +1,5 @@
+export function mergeImages(pixels: Uint8ClampedArray, destination: Uint8ClampedArray) {
+  for (let i = 0; i < destination.length; i += 1) {
+    destination[i] = pixels[i] * 0.5 + destination[i] * 0.5;
+  }
+}