alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-27 23:18:54 -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 {number} targetHeight - Docelowa wysokość
* @param {Object} maskColor - Kolor maski {r, g, b} * @param {Object} maskColor - Kolor maski {r, g, b}
* @returns {HTMLCanvasElement} Przetworzona maska * @returns {HTMLCanvasElement} Przetworzona maska
*/ */async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) {
async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) { // Współrzędne przesunięcia (pan) widoku edytora
const originalWidth = maskData.width || maskData.naturalWidth || this.width; const panX = this.maskTool.x;
const originalHeight = maskData.height || maskData.naturalHeight || this.height; const panY = this.maskTool.y;
log.info("Processing mask for editor:", { log.info("Processing mask for editor:", {
originalSize: {width: originalWidth, height: originalHeight}, sourceSize: {width: maskData.width, height: maskData.height},
targetSize: {width: targetWidth, height: targetHeight}, targetSize: {width: targetWidth, height: targetHeight},
canvasSize: {width: this.width, height: this.height} viewportPan: {x: panX, y: panY}
}); });
const tempCanvas = document.createElement('canvas'); const tempCanvas = document.createElement('canvas');
@@ -715,43 +715,42 @@ export class Canvas {
tempCanvas.height = targetHeight; tempCanvas.height = targetHeight;
const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true}); 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); log.info("Mask viewport cropped correctly.", {
source: "maskData",
const scaledWidth = this.width * scaleToOriginal; cropArea: {x: sourceX, y: sourceY, width: targetWidth, height: targetHeight}
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}
}); });
// Reszta kodu (zmiana koloru) pozostaje bez zmian
const imageData = tempCtx.getImageData(0, 0, targetWidth, targetHeight); const imageData = tempCtx.getImageData(0, 0, targetWidth, targetHeight);
const data = imageData.data; const data = imageData.data;
for (let i = 0; i < data.length; i += 4) { for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3]; // Oryginalny kanał alpha const alpha = data[i + 3];
if (alpha > 0) {
data[i] = maskColor.r; // R data[i] = maskColor.r;
data[i + 1] = maskColor.g; // G data[i + 1] = maskColor.g;
data[i + 2] = maskColor.b; // B data[i + 2] = maskColor.b;
data[i + 3] = alpha; // Zachowaj oryginalny alpha }
} }
tempCtx.putImageData(imageData, 0, 0); tempCtx.putImageData(imageData, 0, 0);
log.info("Mask processing completed - full size scaling applied"); log.info("Mask processing completed - color applied.");
return tempCanvas; return tempCanvas;
} }
@@ -784,6 +783,7 @@ export class Canvas {
setTimeout(this.waitWhileMaskEditing.bind(this), 100); setTimeout(this.waitWhileMaskEditing.bind(this), 100);
} }
} }
/** /**
* Zapisuje obecny stan maski przed otwarciem editora * Zapisuje obecny stan maski przed otwarciem editora
* @returns {Object} Zapisany stan maski * @returns {Object} Zapisany stan maski