less render

beggers · Nov 21, 2024 · 99f6862 · 99f6862
1 parent 2b2eca5
commit 99f6862
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/src/components/EffectsSidebar.tsx b/src/components/EffectsSidebar.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FabricImage, ImageProps } from 'fabric';
+import { FabricImage } from 'fabric';
 
 interface EffectsSidebarProps {
     overlayImages: FabricImage[];

diff --git a/src/components/ImageCanvas.tsx b/src/components/ImageCanvas.tsx
@@ -13,27 +13,27 @@ function ImageCanvas({ image, overlayImages, setDownloadableImage }: ImageCanvas
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
     const fabricCanvasRef = useRef<Canvas | null>(null);
 
-    function updateDownloadableImage() {
-        if (!fabricCanvasRef.current) return;
+    useEffect(() => {
+        function updateDownloadableImage() {
+            if (!fabricCanvasRef.current) return;
 
-        // TODO other image types
-        const downloadableImageUrl = fabricCanvasRef.current.toDataURL({
-            format: 'png',
-            multiplier: 1
-        });
-        const base64Data = downloadableImageUrl.replace(/^data:image\/png;base64,/, '');
+            // TODO other image types
+            const downloadableImageUrl = fabricCanvasRef.current.toDataURL({
+                format: 'png',
+                multiplier: 1
+            });
+            const base64Data = downloadableImageUrl.replace(/^data:image\/png;base64,/, '');
 
-        const byteCharacters = atob(base64Data);
-        const byteNumbers = new Array(byteCharacters.length);
-        for (let i = 0; i < byteCharacters.length; i++) {
-            byteNumbers[i] = byteCharacters.charCodeAt(i);
+            const byteCharacters = atob(base64Data);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: 'image/png' });
+            setDownloadableImage(blob);
         }
-        const byteArray = new Uint8Array(byteNumbers);
-        const blob = new Blob([byteArray], { type: 'image/png' });
-        setDownloadableImage(blob);
-    }
 
-    useEffect(() => {
         if (!fabricCanvasRef.current && canvasRef.current) {
             const canvasElement = canvasRef.current;
             const parentElement = canvasElement.parentElement;
@@ -82,7 +82,7 @@ function ImageCanvas({ image, overlayImages, setDownloadableImage }: ImageCanvas
             reader.readAsDataURL(image);
 
         }
-    }, [image, overlayImages]);
+    }, [image, overlayImages, setDownloadableImage]);
 
     return (
         <div className="image-preview">