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

Fix matting: refresh image after background removal

Browse Source 
Fixed an issue where images were not immediately refreshed after background removal (matting). Now, the canvas updates instantly when the background is removed, ensuring correct display without requiring manual scaling or other actions.
This commit is contained in:
Dariusz L
2025-08-03 22:14:39 +02:00
parent 3c3e6934d7
commit 3d34bfafd5
4 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/CanvasLayers.js
View File

@@ -961,17 +961,13 @@ export class CanvasLayers {
} }
async getLayerImageData(layer) { async getLayerImageData(layer) {
try { try {
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(layer.width, layer.height, '2d', { willReadFrequently: true }); const width = layer.originalWidth || layer.width;
const height = layer.originalHeight || layer.height;
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(width, height, '2d', { willReadFrequently: true });
if (!tempCtx) if (!tempCtx)
throw new Error("Could not create canvas context"); throw new Error("Could not create canvas context");
// We need to draw the layer relative to the new canvas, so we "move" it to 0,0 // Use original image directly to ensure full quality
// by creating a temporary layer object for drawing. tempCtx.drawImage(layer.image, 0, 0, width, height);
const layerToDraw = {
...layer,
x: 0,
y: 0,
};
this._drawLayer(tempCtx, layerToDraw);
const dataUrl = tempCanvas.toDataURL('image/png'); const dataUrl = tempCanvas.toDataURL('image/png');
if (!dataUrl.startsWith('data:image/png;base64,')) { if (!dataUrl.startsWith('data:image/png;base64,')) {
throw new Error("Invalid image data format"); throw new Error("Invalid image data format");

2
js/CanvasView.js
View File

@@ -430,6 +430,8 @@ async function createCanvasWidget(node, widget, app) {
delete newLayer.imageId; delete newLayer.imageId;
canvas.layers[selectedLayerIndex] = newLayer; canvas.layers[selectedLayerIndex] = newLayer;
canvas.canvasSelection.updateSelection([newLayer]); canvas.canvasSelection.updateSelection([newLayer]);
// Invalidate processed image cache when layer image changes (matting)
canvas.canvasLayers.invalidateProcessedImageCache(newLayer.id);
canvas.render(); canvas.render();
canvas.saveState(); canvas.saveState();
showSuccessNotification("Background removed successfully!"); showSuccessNotification("Background removed successfully!");

16
src/CanvasLayers.ts
View File

@@ -1095,18 +1095,14 @@ export class CanvasLayers {
async getLayerImageData(layer: Layer): Promise<string> { async getLayerImageData(layer: Layer): Promise<string> {
try { try {
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(layer.width, layer.height, '2d', { willReadFrequently: true }); const width = layer.originalWidth || layer.width;
const height = layer.originalHeight || layer.height;
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(width, height, '2d', { willReadFrequently: true });
if (!tempCtx) throw new Error("Could not create canvas context"); if (!tempCtx) throw new Error("Could not create canvas context");
// We need to draw the layer relative to the new canvas, so we "move" it to 0,0 // Use original image directly to ensure full quality
// by creating a temporary layer object for drawing. tempCtx.drawImage(layer.image, 0, 0, width, height);
const layerToDraw = {
...layer,
x: 0,
y: 0,
};
this._drawLayer(tempCtx, layerToDraw);
const dataUrl = tempCanvas.toDataURL('image/png'); const dataUrl = tempCanvas.toDataURL('image/png');
if (!dataUrl.startsWith('data:image/png;base64,')) { if (!dataUrl.startsWith('data:image/png;base64,')) {

4
src/CanvasView.ts
View File

@@ -515,6 +515,10 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
canvas.layers[selectedLayerIndex] = newLayer; canvas.layers[selectedLayerIndex] = newLayer;
canvas.canvasSelection.updateSelection([newLayer]); canvas.canvasSelection.updateSelection([newLayer]);
// Invalidate processed image cache when layer image changes (matting)
canvas.canvasLayers.invalidateProcessedImageCache(newLayer.id);
canvas.render(); canvas.render();
canvas.saveState(); canvas.saveState();
showSuccessNotification("Background removed successfully!"); showSuccessNotification("Background removed successfully!");