Change fade opacity and position

src/components/ImageEditor.vue

@@ -66,9 +66,10 @@ function draw(data: ImageData) {
 function onDragOver(event: DragEvent) {
   event.preventDefault();
   event.dataTransfer!.dropEffect = 'copy';
-  if (event.offsetX > canvas.value!.width / 2) {
+  const preview = event.target as HTMLElement;
+  if (event.offsetX > preview.offsetWidth / 3 * 2) {
     overlay.value = 'right';
-  } else if (event.offsetY > canvas.value!.height / 2) {
+  } else if (event.offsetY > preview.offsetHeight / 3 * 2) {
     overlay.value = 'bottom';
   } else {
     overlay.value = ' ';
@@ -78,15 +79,16 @@ function onDragOver(event: DragEvent) {
 function onDrop(event: DragEvent) {
   event.preventDefault();
   overlay.value = null;
+  const preview = event.target as HTMLElement;
   const id = event.dataTransfer!.getData('text/plain');
   const img: HTMLImageElement = collection.value!.images[parseInt(id)];
-  if (event.offsetX > canvas.value!.width / 2) {
+  if (event.offsetX > preview.offsetWidth / 3 * 2) {
     const dx = canvas.value!.width;
     const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
     canvas.value!.width += img.width;
     ctx.putImageData(imageData, 0, 0)
     ctx.drawImage(img, dx, 0);
-  } else if (event.offsetY > canvas.value!.height / 2) {
+  } else if (event.offsetY > preview.offsetHeight / 3 * 2) {
     const dy = canvas.value!.height;
     const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
     canvas.value!.height += img.height;
@@ -94,9 +96,13 @@ function onDrop(event: DragEvent) {
     ctx.drawImage(img, 0, dy);
   } else {
     const current = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height).data;
-    ctx.drawImage(img, 0, 0);
+    ctx.drawImage(img, event.offsetX, event.offsetY);
     const merged = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
-    mergeImages(current, merged.data);
+    const opacity = prompt('Enter opacity (0-1)', '0.5');
+    if (opacity === null || isNaN(parseFloat(opacity))) {
+      return;
+    }
+    mergeImages(current, merged.data, parseFloat(opacity));
     ctx.putImageData(merged, 0, 0);
   }
 }

src/processing/merge.ts

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