1 files changed, 35 insertions, 29 deletions
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 9c03600cf..1ec6d6e3f 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -1,26 +1,25 @@
-import './GenerativeFill.scss';
-import React = require('react');
-import { useEffect, useRef, useState } from 'react';
-import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
-import { BrushHandler } from './generativeFillUtils/BrushHandler';
-import { IconButton } from 'browndash-components';
 import { Checkbox, FormControlLabel, Slider, TextField } from '@mui/material';
-import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
-import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
-import { PointerHandler } from './generativeFillUtils/PointerHandler';
-import { IoMdUndo, IoMdRedo } from 'react-icons/io';
-import { MainView } from '../../MainView';
+import { IconButton } from 'browndash-components';
+import { useEffect, useRef, useState } from 'react';
+import { CgClose } from 'react-icons/cg';
+import { IoMdRedo, IoMdUndo } from 'react-icons/io';
 import { Doc, DocListCast } from '../../../../fields/Doc';
-import { Networking } from '../../../Network';
-import { Utils } from '../../../../Utils';
-import { DocUtils, Docs } from '../../../documents/Documents';
+import { List } from '../../../../fields/List';
 import { NumCast } from '../../../../fields/Types';
+import { Utils } from '../../../../Utils';
+import { Docs, DocUtils } from '../../../documents/Documents';
+import { Networking } from '../../../Network';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
 import { OpenWhereMod } from '../DocumentView';
-import Buttons from './GenerativeFillButtons';
-import { List } from '../../../../fields/List';
-import { CgClose } from 'react-icons/cg';
 import { ImageBox } from '../ImageBox';
+import './GenerativeFill.scss';
+import Buttons from './GenerativeFillButtons';
+import { BrushHandler } from './generativeFillUtils/BrushHandler';
+import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
+import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
+import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
+import { PointerHandler } from './generativeFillUtils/PointerHandler';
+import React = require('react');
 
 enum BrushStyle {
     ADD,
@@ -166,20 +165,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('');