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

Add export of canvas with mask as alpha channel

Browse Source 
Introduces a new method to export the flattened canvas with the mask applied as the alpha channel. Updates UI actions to allow previewing, copying, and saving the image with mask alpha, and ensures node previews use the new export method. This enhances workflows that require the mask to be embedded as transparency in the output image.
This commit is contained in:
Dariusz L
2025-06-29 21:26:53 +02:00
parent 0bb54a0a6d
commit abb0f8ef53
3 changed files with 150 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
js/CanvasView.js
View File

@@ -917,8 +917,24 @@ async function createCanvasWidget(node, widget, app) {
const triggerWidget = node.widgets.find(w => w.name === "trigger");
const updateOutput = () => {
const updateOutput = async () => {
triggerWidget.value = (triggerWidget.value + 1) % 99999999;
// Aktualizuj podgląd node z maską jako alpha
try {
const new_preview = new Image();
const blob = await canvas.getFlattenedCanvasWithMaskAsBlob();
if (blob) {
new_preview.src = URL.createObjectURL(blob);
await new Promise(r => new_preview.onload = r);
node.imgs = [new_preview];
} else {
node.imgs = [];
}
} catch (error) {
console.error("Error updating node preview:", error);
}
// app.graph.runStep(); // Potentially not needed if we just want to mark dirty
};
@@ -1210,6 +1226,19 @@ app.registerExtension({
}
},
},
{
content: "Open Image with Mask Alpha",
callback: async () => {
try {
const blob = await self.canvasWidget.getFlattenedCanvasWithMaskAsBlob();
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
setTimeout(() => URL.revokeObjectURL(url), 1000);
} catch (e) {
log.error("Error opening image with mask:", e);
}
},
},
{
content: "Copy Image",
callback: async () => {
@@ -1224,6 +1253,20 @@ app.registerExtension({
}
},
},
{
content: "Copy Image with Mask Alpha",
callback: async () => {
try {
const blob = await self.canvasWidget.getFlattenedCanvasWithMaskAsBlob();
const item = new ClipboardItem({'image/png': blob});
await navigator.clipboard.write([item]);
log.info("Image with mask alpha copied to clipboard.");
} catch (e) {
log.error("Error copying image with mask:", e);
alert("Failed to copy image with mask to clipboard.");
}
},
},
{
content: "Save Image",
callback: async () => {
@@ -1242,6 +1285,24 @@ app.registerExtension({
}
},
},
{
content: "Save Image with Mask Alpha",
callback: async () => {
try {
const blob = await self.canvasWidget.getFlattenedCanvasWithMaskAsBlob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'canvas_output_with_mask.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 1000);
} catch (e) {
log.error("Error saving image with mask:", e);
}
},
},
];
if (options.length > 0) {
options.unshift({content: "___", disabled: true});