iut/pixture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change fade opacity and position

Browse Source
This commit is contained in:
Clément Fréville
2024-02-16 22:50:14 +01:00
parent fdf0919333
commit 706a28fe59
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ImageEditor.vue
View File

@@ -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);
}
}

4
src/processing/merge.ts
View File

@@ -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;
}
}