From 3dfd31d93f697531734be37b81575d5da9ea43a6 Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Tue, 13 Feb 2024 14:23:28 +0100
Subject: [PATCH] Allow blending two images together

---
 src/components/ImageEditor.vue | 13 +++++++++++--
 src/processing/merge.ts        |  5 +++++
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/processing/merge.ts

diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue
index 312a188..23cda25 100644
--- a/src/components/ImageEditor.vue
+++ b/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);
   }
 }
 
diff --git a/src/processing/merge.ts b/src/processing/merge.ts
new file mode 100644
index 0000000..da77034
--- /dev/null
+++ b/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;
+  }
+}