made drawing fill automatically size images

1 files changed, 0 insertions, 312 deletions

diff --git a/src/client/views/nodes/imageEditor/imageEditingUtils/ImageHandler.ts b/src/client/views/nodes/imageEditor/imageEditingUtils/ImageHandler.ts
deleted file mode 100644
index 514e8a94f..000000000
--- a/src/client/views/nodes/imageEditor/imageEditingUtils/ImageHandler.ts
+++ /dev/null
@@ -1,312 +0,0 @@
-import { RefObject } from 'react';
-import { bgColor, canvasSize } from '../ImageEditorUtils/imageEditorConstants';
-
-export interface APISuccess {
-    status: 'success';
-    urls: string[];
-}
-
-export interface APIError {
-    status: 'error';
-    message: string;
-}
-
-export class ImageUtility {
-    /**
-     *
-     * @param canvas Canvas to convert
-     * @returns Blob of canvas
-     */
-    static canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> =>
-        new Promise(resolve => {
-            canvas.toBlob(blob => {
-                if (blob) {
-                    resolve(blob);
-                }
-            }, 'image/png');
-        });
-
-    // 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;
-                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;
-        }
-        return undefined;
-    };
-
-    // converts an image to a canvas data url
-    static convertImgToCanvasUrl = async (imageSrc: string, width: number, height: number): Promise<string> =>
-        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;
-        });
-
-    // calls the openai api to get image edits
-    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();
-        fd.append('image', imgBlob, 'image.png');
-        fd.append('mask', maskBlob, 'mask.png');
-        fd.append('prompt', prompt);
-        fd.append('size', '1024x1024');
-        fd.append('n', n ? JSON.stringify(n) : '1');
-        fd.append('response_format', 'b64_json');
-
-        try {
-            const res = await fetch(apiUrl, {
-                method: 'POST',
-                headers: {
-                    Authorization: `Bearer ${process.env.OPENAI_KEY}`,
-                },
-                body: fd,
-            });
-            const data = await res.json();
-            console.log(data.data);
-            return {
-                status: 'success',
-                urls: (data.data as { b64_json: string }[]).map(urlData => `data:image/png;base64,${urlData.b64_json}`),
-            };
-        } catch (err) {
-            console.log(err);
-            return { status: 'error', message: 'API error.' };
-        }
-    };
-
-    // mock api call
-    static mockGetEdit = async (mockSrc: string): Promise<APISuccess | APIError> => ({
-        status: 'success',
-        urls: [mockSrc, mockSrc, mockSrc],
-    });
-
-    // Gets the canvas rendering context of a canvas
-    static getCanvasContext = (canvasRef: RefObject<HTMLCanvasElement>): CanvasRenderingContext2D | null => {
-        if (!canvasRef.current) return null;
-        const ctx = canvasRef.current.getContext('2d');
-        if (!ctx) return null;
-        return ctx;
-    };
-
-    // Helper for downloading the canvas (for debugging)
-    static downloadCanvas = (canvas: HTMLCanvasElement) => {
-        const url = canvas.toDataURL();
-        const downloadLink = document.createElement('a');
-        downloadLink.href = url;
-        downloadLink.download = 'canvas';
-
-        downloadLink.click();
-        downloadLink.remove();
-    };
-
-    // Download the canvas (for debugging)
-    static downloadImageCanvas = (imgUrl: string) => {
-        const img = new Image();
-        img.src = imgUrl;
-        img.onload = () => {
-            const canvas = document.createElement('canvas');
-            canvas.width = canvasSize;
-            canvas.height = canvasSize;
-            const ctx = canvas.getContext('2d');
-            ctx?.drawImage(img, 0, 0, canvasSize, canvasSize);
-
-            this.downloadCanvas(canvas);
-        };
-    };
-
-    // Clears the canvas
-    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);
-    };
-
-    // Draws the image to the current canvas
-    static drawImgToCanvas = (img: HTMLImageElement, canvasRef: React.RefObject<HTMLCanvasElement>, width: number, height: number) => {
-        const drawImg = (htmlImg: HTMLImageElement) => {
-            const ctx = this.getCanvasContext(canvasRef);
-            if (!ctx) return;
-            ctx.globalCompositeOperation = 'source-over';
-            ctx.clearRect(0, 0, width, height);
-            ctx.drawImage(htmlImg, 0, 0, width, height);
-        };
-
-        if (img.complete) {
-            drawImg(img);
-        } else {
-            img.onload = () => {
-                drawImg(img);
-            };
-        }
-    };
-
-    // Gets the image mask for the openai endpoint
-    static getCanvasMask = (srcCanvas: HTMLCanvasElement, paddedCanvas: HTMLCanvasElement): HTMLCanvasElement | undefined => {
-        const canvas = document.createElement('canvas');
-        canvas.width = canvasSize;
-        canvas.height = canvasSize;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return undefined;
-        ctx?.clearRect(0, 0, canvasSize, canvasSize);
-        ctx.drawImage(paddedCanvas, 0, 0);
-
-        // 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;
-    };
-
-    // Fills in the blank areas of the image with an image reflection (to fill in a square-shaped canvas)
-    static drawHorizontalReflection = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, xOffset: number) => {
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const { data } = imageData;
-        for (let i = 0; i < canvas.height; i++) {
-            for (let j = 0; j < xOffset; j++) {
-                const targetIdx = 4 * (i * canvas.width + j);
-                const sourceI = i;
-                const sourceJ = xOffset + (xOffset - j);
-                const sourceIdx = 4 * (sourceI * canvas.width + sourceJ);
-                data[targetIdx] = data[sourceIdx];
-                data[targetIdx + 1] = data[sourceIdx + 1];
-                data[targetIdx + 2] = data[sourceIdx + 2];
-            }
-        }
-        for (let i = 0; i < canvas.height; i++) {
-            for (let j = canvas.width - 1; j >= canvas.width - 1 - xOffset; j--) {
-                const targetIdx = 4 * (i * canvas.width + j);
-                const sourceI = i;
-                const sourceJ = canvas.width - 1 - xOffset - (xOffset - (canvas.width - j));
-                const sourceIdx = 4 * (sourceI * canvas.width + sourceJ);
-                data[targetIdx] = data[sourceIdx];
-                data[targetIdx + 1] = data[sourceIdx + 1];
-                data[targetIdx + 2] = data[sourceIdx + 2];
-            }
-        }
-        ctx.putImageData(imageData, 0, 0);
-    };
-
-    // Fills in the blank areas of the image with an image reflection (to fill in a square-shaped canvas)
-    static drawVerticalReflection = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, yOffset: number) => {
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const { data } = imageData;
-        for (let j = 0; j < canvas.width; j++) {
-            for (let i = 0; i < yOffset; i++) {
-                const targetIdx = 4 * (i * canvas.width + j);
-                const sourceJ = j;
-                const sourceI = yOffset + (yOffset - i);
-                const sourceIdx = 4 * (sourceI * canvas.width + sourceJ);
-                data[targetIdx] = data[sourceIdx];
-                data[targetIdx + 1] = data[sourceIdx + 1];
-                data[targetIdx + 2] = data[sourceIdx + 2];
-            }
-        }
-        for (let j = 0; j < canvas.width; j++) {
-            for (let i = canvas.height - 1; i >= canvas.height - 1 - yOffset; i--) {
-                const targetIdx = 4 * (i * canvas.width + j);
-                const sourceJ = j;
-                const sourceI = canvas.height - 1 - yOffset - (yOffset - (canvas.height - i));
-                const sourceIdx = 4 * (sourceI * canvas.width + sourceJ);
-                data[targetIdx] = data[sourceIdx];
-                data[targetIdx + 1] = data[sourceIdx + 1];
-                data[targetIdx + 2] = data[sourceIdx + 2];
-            }
-        }
-        ctx.putImageData(imageData, 0, 0);
-    };
-
-    // Gets the unaltered (besides filling in padding) version of the image for the api call
-    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 undefined;
-        // fix scaling
-        const scale = Math.min(canvasSize / img.width, canvasSize / img.height);
-        const width = Math.floor(img.width * scale);
-        const height = Math.floor(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 = Math.floor((canvasSize - width) / 2);
-            ctx.drawImage(img, xOffset, 0, width, height);
-
-            // draw reflected image padding
-            this.drawHorizontalReflection(ctx, canvas, xOffset);
-        } else {
-            // vertical padding, y offset
-            const yOffset = Math.floor((canvasSize - height) / 2);
-            ctx.drawImage(img, 0, yOffset, width, height);
-
-            // draw reflected image padding
-            this.drawVerticalReflection(ctx, canvas, yOffset);
-        }
-        return canvas;
-    };
-
-    /**
-     * Converts a url to base64 (tainted canvas workaround)
-     */
-    static urlToBase64 = async (imageUrl: string): Promise<string | undefined> => {
-        try {
-            const res = await fetch(imageUrl);
-            const blob = await res.blob();
-
-            return new Promise<string>((resolve, reject) => {
-                const reader = new FileReader();
-                reader.onload = () => {
-                    const base64Data = reader.result?.toString().split(',')[1];
-                    if (base64Data) {
-                        resolve(base64Data);
-                    } else {
-                        reject(new Error('Failed to convert.'));
-                    }
-                };
-                reader.onerror = () => {
-                    reject(new Error('Error reading image data'));
-                };
-                reader.readAsDataURL(blob);
-            });
-        } catch (err) {
-            console.error(err);
-        }
-        return undefined;
-    };
-}