add button on txt2img and img2img to send img to Canvas Editor

javascript/lazyload/canvas-editor.js

@@ -66,6 +66,64 @@ await _import();
         updateGradioImage(imageElems[0], dt);
     }
 
+    function getCanvasEditorTabIndex(){
+        const tabCanvasEditorDiv = document.getElementById('tab_canvas_editor');
+        const parent = tabCanvasEditorDiv.parentNode;
+        const siblings = parent.childNodes;
+
+        let index = -1;
+        for (let i = 0; i < siblings.length; i++) {
+          if (siblings[i] === tabCanvasEditorDiv) {
+            index = i;
+            break;
+          }
+        }
+
+        return index / 3;
+    }
+
+    function isTxt2Img() {
+        const div = document.getElementById('tab_txt2img');
+        const computedStyle = window.getComputedStyle(div);
+        const displayValue = computedStyle.getPropertyValue('display');
+
+        return !(displayValue === 'none');
+    }
+
+    window.sendImageToCanvasEditor = function () {
+        const gallerySelector = isTxt2Img()? '#txt2img_gallery': '#img2img_gallery';
+
+        const txt2imgGallery = gradioApp().querySelector(gallerySelector);
+
+        const img = txt2imgGallery.querySelector(".preview img");
+
+        if (img) {
+            const tabIndex = getCanvasEditorTabIndex();
+
+            const width = img.naturalWidth; // 获取图片的原始宽度
+            const height = img.naturalHeight;
+
+            gradioApp().querySelector('#tabs').querySelectorAll('button')[tabIndex - 1].click();
+
+            store.activePage?.addElement({
+                type: 'image',
+                src: img.src,
+                width: width,
+                height: height,
+                selectable: true,
+                alwaysOnTop: false,
+                showInExport: true,
+                draggable: true,
+                contentEditable: true,
+                removable: true,
+                resizable: true,
+            });
+        }
+        else {
+            alert("No image selected");
+        }
+    }
+
     window.sendImageCanvasEditorControlNet = async function (type, index) {
         const imageDataURL = await store.toDataURL();
 

scripts/main.py

@@ -19,7 +19,11 @@ class Script(scripts.Script):
         return scripts.AlwaysVisible
 
     def ui(self, is_img2img):
-        return ()
+        send_canvas_editor = gr.Button(value="Send to Canvas Editor")
+
+        send_canvas_editor.click(None, send_canvas_editor, None, _js="sendImageToCanvasEditor")
+
+        return [send_canvas_editor]
 
 
 def wrap_api(fn):
@@ -81,7 +85,6 @@ def jscall(
     v_fire.click(fn=wrap_api(fn), inputs=[v_args], outputs=[v_sink, v_sink2])
     v_sink2.change(fn=None, _js=js(name), inputs=[v_sink], outputs=[sink])
 
-
 def on_ui_tabs():
     id = lambda s: f'canvas-editor-{s}'
     js = lambda s: f'globalThis["{id(s)}"]'