From 99f6862e88d183c2631febb7907ad3cf47cb5968 Mon Sep 17 00:00:00 2001
From: Ben Eggers <ben@beneggers.com>
Date: Thu, 21 Nov 2024 13:13:09 -0800
Subject: [PATCH] less render

---
 src/components/EffectsSidebar.tsx |  2 +-
 src/components/ImageCanvas.tsx    | 36 +++++++++++++++----------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/EffectsSidebar.tsx b/src/components/EffectsSidebar.tsx
index 40727ce..5c6164c 100644
--- 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
index d1f95f1..bc9575b 100644
--- 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">