baseline working version, different image sizes work

1 files changed, 101 insertions, 18 deletions

diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
index 1954ab3fb..8d32221bd 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { canvasSize } from './generativeFillConstants';
+import { bgColor, canvasSize } from './generativeFillConstants';
 
 export interface APISuccess {
     status: 'success';
@@ -22,6 +22,47 @@ export class ImageUtility {
         });
     };
 
+    // given a square api image, get the cropped img
+    static getCroppedImg = (img: HTMLImageElement, width: number, height: number): HTMLCanvasElement | undefined => {
+        // Create a new canvas element
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            // Clear the canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (width < height) {
+                // horizontal padding, x offset
+                const xOffset = (canvasSize - width) / 2;
+                console.log(xOffset);
+                ctx.drawImage(img, xOffset, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+            } else {
+                // vertical padding, y offset
+                const yOffset = (canvasSize - height) / 2;
+                ctx.drawImage(img, 0, yOffset, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+            }
+            return canvas;
+        }
+    };
+
+    static convertImageToCanvasDataURL = async (imageSrc: string, width: number, height: number): Promise<string> => {
+        return new Promise<string>((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = this.getCroppedImg(img, width, height);
+                if (canvas) {
+                    const dataUrl = canvas.toDataURL();
+                    resolve(dataUrl);
+                }
+            };
+            img.onerror = error => {
+                reject(error);
+            };
+            img.src = imageSrc;
+        });
+    };
+
     static getEdit = async (imgBlob: Blob, maskBlob: Blob, prompt: string, n?: number): Promise<APISuccess | APIError> => {
         const apiUrl = 'https://api.openai.com/v1/images/edits';
         const fd = new FormData();
@@ -90,41 +131,83 @@ export class ImageUtility {
         };
     };
 
-    static drawImgToCanvas = (img: HTMLImageElement, canvasRef: React.RefObject<HTMLCanvasElement>, loaded?: boolean) => {
-        if (loaded) {
+    static clearCanvas = (canvasRef: React.RefObject<HTMLCanvasElement>) => {
+        const ctx = this.getCanvasContext(canvasRef);
+        if (!ctx || !canvasRef.current) return;
+        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    };
+
+    static drawImgToCanvas = (img: HTMLImageElement, canvasRef: React.RefObject<HTMLCanvasElement>, width: number, height: number) => {
+        const drawImg = (img: HTMLImageElement) => {
             const ctx = this.getCanvasContext(canvasRef);
             if (!ctx) return;
             ctx.globalCompositeOperation = 'source-over';
-            const scale = Math.max(canvasSize / img.width, canvasSize / img.height);
-            const width = img.width * scale;
-            const height = img.height * scale;
-            ctx.clearRect(0, 0, canvasSize, canvasSize);
+            ctx.clearRect(0, 0, width, height);
             ctx.drawImage(img, 0, 0, width, height);
+        };
+
+        if (img.complete) {
+            drawImg(img);
         } else {
             console.log('loading image');
             img.onload = () => {
-                console.log('loaded');
-                const ctx = this.getCanvasContext(canvasRef);
-                if (!ctx) return;
-                ctx.globalCompositeOperation = 'source-over';
-                const scale = Math.max(canvasSize / img.width, canvasSize / img.height);
-                const width = img.width * scale;
-                const height = img.height * scale;
-                ctx.clearRect(0, 0, canvasSize, canvasSize);
-                ctx.drawImage(img, 0, 0, width, height);
+                drawImg(img);
             };
         }
     };
 
     // The image must be loaded!
-    static getCanvasImg = (img: HTMLImageElement): HTMLCanvasElement => {
+    static getCanvasMask = (srcCanvas: HTMLCanvasElement): HTMLCanvasElement | undefined => {
         const canvas = document.createElement('canvas');
         canvas.width = canvasSize;
         canvas.height = canvasSize;
         const ctx = canvas.getContext('2d');
+        if (!ctx) return;
         ctx?.clearRect(0, 0, canvasSize, canvasSize);
-        ctx?.drawImage(img, 0, 0, canvasSize, canvasSize);
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, canvasSize, canvasSize);
 
+        // extract and set padding data
+        if (srcCanvas.height > srcCanvas.width) {
+            // horizontal padding, x offset
+            const xOffset = (canvasSize - srcCanvas.width) / 2;
+            ctx?.clearRect(xOffset, 0, srcCanvas.width, srcCanvas.height);
+            ctx.drawImage(srcCanvas, xOffset, 0, srcCanvas.width, srcCanvas.height);
+        } else {
+            // vertical padding, y offset
+            const yOffset = (canvasSize - srcCanvas.height) / 2;
+            ctx?.clearRect(0, yOffset, srcCanvas.width, srcCanvas.height);
+            ctx.drawImage(srcCanvas, 0, yOffset, srcCanvas.width, srcCanvas.height);
+        }
+        return canvas;
+    };
+
+    // The image must be loaded!
+    static getCanvasImg = (img: HTMLImageElement): HTMLCanvasElement | undefined => {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasSize;
+        canvas.height = canvasSize;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+        // fix scaling
+        const scale = Math.min(canvasSize / img.width, canvasSize / img.height);
+        const width = img.width * scale;
+        const height = img.height * scale;
+        ctx?.clearRect(0, 0, canvasSize, canvasSize);
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, canvasSize, canvasSize);
+
+        // extract and set padding data
+        if (img.naturalHeight > img.naturalWidth) {
+            // horizontal padding, x offset
+            const xOffset = (canvasSize - width) / 2;
+
+            ctx.drawImage(img, xOffset, 0, width, height);
+        } else {
+            // vertical padding, y offset
+            const yOffset = (canvasSize - height) / 2;
+            ctx.drawImage(img, 0, yOffset, width, height);
+        }
         return canvas;
     };
 }