diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue index 63d7b2e..2edd0fa 100644 --- a/src/components/ImageEditor.vue +++ b/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); } } diff --git a/src/processing/merge.ts b/src/processing/merge.ts index da77034..7003c63 100644 --- a/src/processing/merge.ts +++ b/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; } }