Merge pull request #216 from brown-dash/sophie-ai-images

Image Editor fix for browndash, small icon/ui fixes

1 files changed, 19 insertions, 12 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 9c03600cf..1400d0f6d 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -166,20 +166,27 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // first load
     useEffect(() => {
-        if (!imageEditorSource || imageEditorSource === '') return;
-        const img = new Image();
-        img.src = imageEditorSource;
-        currImg.current = img;
-        originalImg.current = img;
-        img.onload = () => {
-            const imgWidth = img.naturalWidth;
-            const imgHeight = img.naturalHeight;
-            const scale = Math.min(canvasSize / imgWidth, canvasSize / imgHeight);
-            const width = imgWidth * scale;
-            const height = imgHeight * scale;
-            setCanvasDims({ width, height });
+        const loadInitial = async () => {
+            if (!imageEditorSource || imageEditorSource === '') return;
+            const img = new Image();
+            const res = await ImageUtility.urlToBase64(imageEditorSource);
+            if (!res) return;
+            img.src = `data:image/png;base64,${res}`;
+
+            img.onload = () => {
+                currImg.current = img;
+                originalImg.current = img;
+                const imgWidth = img.naturalWidth;
+                const imgHeight = img.naturalHeight;
+                const scale = Math.min(canvasSize / imgWidth, canvasSize / imgHeight);
+                const width = imgWidth * scale;
+                const height = imgHeight * scale;
+                setCanvasDims({ width, height });
+            };
         };
 
+        loadInitial();
+
         // cleanup
         return () => {
             setInput('');