alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-26 14:48:52 -03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor mask editor cropping and formatting in Canvas.js

Browse Source 
Updated the mask processing logic to crop the mask based on the viewport pan position instead of scaling, ensuring accurate mask editing. Also standardized object formatting in logging and context creation for consistency.
This commit is contained in:
Dariusz L
2025-07-02 00:11:45 +02:00
parent faa60d4c28
commit 4966069b67
1 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
js/Canvas.js
View File

@@ -699,15 +699,15 @@ export class Canvas {
* @param {number} targetHeight - Docelowa wysokość
* @param {Object} maskColor - Kolor maski {r, g, b}
* @returns {HTMLCanvasElement} Przetworzona maska
*/
async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) {
const originalWidth = maskData.width || maskData.naturalWidth || this.width;
const originalHeight = maskData.height || maskData.naturalHeight || this.height;
*/async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) {
// Współrzędne przesunięcia (pan) widoku edytora
const panX = this.maskTool.x;
const panY = this.maskTool.y;
log.info("Processing mask for editor:", {
originalSize: {width: originalWidth, height: originalHeight},
sourceSize: {width: maskData.width, height: maskData.height},
targetSize: {width: targetWidth, height: targetHeight},
canvasSize: {width: this.width, height: this.height}
viewportPan: {x: panX, y: panY}
});
const tempCanvas = document.createElement('canvas');
@@ -715,43 +715,42 @@ export class Canvas {
tempCanvas.height = targetHeight;
const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true});
tempCtx.clearRect(0, 0, targetWidth, targetHeight);
const sourceX = -panX;
const sourceY = -panY;
tempCtx.drawImage(
maskData, // Źródło: pełna maska z "output area"
sourceX, // sx: Prawdziwa współrzędna X na dużej masce (np. 1000)
sourceY, // sy: Prawdziwa współrzędna Y na dużej masce (np. 1000)
targetWidth, // sWidth: Szerokość wycinanego fragmentu
targetHeight, // sHeight: Wysokość wycinanego fragmentu
0, // dx: Gdzie wkleić w płótnie docelowym (zawsze 0)
0, // dy: Gdzie wkleić w płótnie docelowym (zawsze 0)
targetWidth, // dWidth: Szerokość wklejanego obrazu
targetHeight // dHeight: Wysokość wklejanego obrazu
);
const scaleToOriginal = Math.min(originalWidth / this.width, originalHeight / this.height);
const scaledWidth = this.width * scaleToOriginal;
const scaledHeight = this.height * scaleToOriginal;
const offsetX = (targetWidth - scaledWidth) / 2;
const offsetY = (targetHeight - scaledHeight) / 2;
tempCtx.drawImage(maskData, offsetX, offsetY, scaledWidth, scaledHeight);
log.info("Mask drawn scaled to original image size:", {
originalSize: {width: originalWidth, height: originalHeight},
targetSize: {width: targetWidth, height: targetHeight},
canvasSize: {width: this.width, height: this.height},
scaleToOriginal: scaleToOriginal,
finalSize: {width: scaledWidth, height: scaledHeight},
offset: {x: offsetX, y: offsetY}
log.info("Mask viewport cropped correctly.", {
source: "maskData",
cropArea: {x: sourceX, y: sourceY, width: targetWidth, height: targetHeight}
});
// Reszta kodu (zmiana koloru) pozostaje bez zmian
const imageData = tempCtx.getImageData(0, 0, targetWidth, targetHeight);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3]; // Oryginalny kanał alpha
data[i] = maskColor.r; // R
data[i + 1] = maskColor.g; // G
data[i + 2] = maskColor.b; // B
data[i + 3] = alpha; // Zachowaj oryginalny alpha
const alpha = data[i + 3];
if (alpha > 0) {
data[i] = maskColor.r;
data[i + 1] = maskColor.g;
data[i + 2] = maskColor.b;
}
}
tempCtx.putImageData(imageData, 0, 0);
log.info("Mask processing completed - full size scaling applied");
log.info("Mask processing completed - color applied.");
return tempCanvas;
}
@@ -784,6 +783,7 @@ export class Canvas {
setTimeout(this.waitWhileMaskEditing.bind(this), 100);
}
}
/**
* Zapisuje obecny stan maski przed otwarciem editora
* @returns {Object} Zapisany stan maski