|
|
@ -86,12 +86,14 @@ function onDrop(event: DragEvent) {
|
|
|
|
const dx = canvas.value!.width;
|
|
|
|
const dx = canvas.value!.width;
|
|
|
|
const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
|
|
|
|
const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
|
|
|
|
canvas.value!.width += img.width;
|
|
|
|
canvas.value!.width += img.width;
|
|
|
|
|
|
|
|
canvas.value!.height = Math.max(canvas.value!.height, img.height);
|
|
|
|
ctx.putImageData(imageData, 0, 0)
|
|
|
|
ctx.putImageData(imageData, 0, 0)
|
|
|
|
ctx.drawImage(img, dx, 0);
|
|
|
|
ctx.drawImage(img, dx, 0);
|
|
|
|
} else if (event.offsetY > preview.offsetHeight / 3 * 2) {
|
|
|
|
} else if (event.offsetY > preview.offsetHeight / 3 * 2) {
|
|
|
|
const dy = canvas.value!.height;
|
|
|
|
const dy = canvas.value!.height;
|
|
|
|
const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
|
|
|
|
const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
|
|
|
|
canvas.value!.height += img.height;
|
|
|
|
canvas.value!.height += img.height;
|
|
|
|
|
|
|
|
canvas.value!.width = Math.max(canvas.value!.width, img.width);
|
|
|
|
ctx.putImageData(imageData, 0, 0)
|
|
|
|
ctx.putImageData(imageData, 0, 0)
|
|
|
|
ctx.drawImage(img, 0, dy);
|
|
|
|
ctx.drawImage(img, 0, dy);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
@ -105,6 +107,7 @@ function onDrop(event: DragEvent) {
|
|
|
|
mergeImages(current, merged.data, parseFloat(opacity));
|
|
|
|
mergeImages(current, merged.data, parseFloat(opacity));
|
|
|
|
ctx.putImageData(merged, 0, 0);
|
|
|
|
ctx.putImageData(merged, 0, 0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
viable = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onDragLeave() {
|
|
|
|
function onDragLeave() {
|
|
|
|