jinx/ComfyUI
1
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-08-03 23:49:57 +08:00
Code Issues Activity

Add support for pasting images into the graph

Browse Source 
It can be useful to paste images from the clipboard directly into the node graph.
This commit modifies copy and paste handling to support this.

When an image file is found in the clipboard, we check whether an image node is selected.
If so, paste the image into that node. Otherwise, a new node is created.
If no image data are found in the clipboard, we call the original Litegraph paste.
To ensure that onCopy and onPaste events are fired, we override Litegraph's ctrl+c and ctrl+v handling.

Try to detect whether the pasted image is a real file on disk, or just pixel data copied from e.g. Photoshop.
Pasted pixel data will be called 'image.png' and have a creation time of now.
If it is simply pasted data, we store it in the subfolder /input/clipboard/.

This also adds support for the subfolder property in the IMAGEUPLOAD widget.
This commit is contained in:
Michael Abrahams
2023-09-03 11:51:50 -04:00
parent a74c5dbf37
commit 6f70227b8c
2 changed files with 102 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/scripts/widgets.js
View File

@@ -76,7 +76,7 @@ export function addValueControlWidget(node, targetWidget, defaultValue = "random
targetWidget.value = max;
}
}
return valueControl;
return valueControl;
};
function seedWidget(node, inputName, inputData, app) {
@@ -387,11 +387,12 @@ export const ComfyWidgets = {
}
});
async function uploadFile(file, updateNode) {
async function uploadFile(file, updateNode, pasted = false) {
try {
// Wrap file in formdata so it includes filename
const body = new FormData();
body.append("image", file);
if (pasted) body.append("subfolder", "pasted");
const resp = await api.fetchApi("/upload/image", {
method: "POST",
body,
@@ -399,15 +400,17 @@ export const ComfyWidgets = {
if (resp.status === 200) {
const data = await resp.json();
// Add the file as an option and update the widget value
if (!imageWidget.options.values.includes(data.name)) {
imageWidget.options.values.push(data.name);
// Add the file to the dropdown list and update the widget value
let path = data.name;
if (data.subfolder) path = data.subfolder + "/" + path;
if (!imageWidget.options.values.includes(path)) {
imageWidget.options.values.push(path);
}
if (updateNode) {
showImage(data.name);
imageWidget.value = data.name;
showImage(path);
imageWidget.value = path;
}
} else {
alert(resp.status + " - " + resp.statusText);
@@ -460,6 +463,16 @@ export const ComfyWidgets = {
return handled;
};
node.pasteFile = function(file) {
if (file.type.startsWith("image/")) {
const is_pasted = (file.name === "image.png") &&
(file.lastModified - Date.now() < 2000);
uploadFile(file, true, is_pasted);
return true;
}
return false;
}
return { widget: uploadWidget };
},
};