From 8c8edf652362c190fb45e60bf862a79c533235e9 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 1 Mar 2024 15:46:40 -0600
Subject: [PATCH] Refine Image object ref handling

---
 src/components/CanvasBlurCapture.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/CanvasBlurCapture.tsx b/src/components/CanvasBlurCapture.tsx
index fa8650bb..d6400646 100644
--- a/src/components/CanvasBlurCapture.tsx
+++ b/src/components/CanvasBlurCapture.tsx
@@ -24,7 +24,7 @@ export default function CanvasBlurCapture({
   quality?: number
 }) {
   const refCanvas = useRef<HTMLCanvasElement | null>(null);
-  const refImage = useRef<HTMLImageElement | null>(null);
+  const refImage = useRef<HTMLImageElement>();
   const refTimeouts = useRef<NodeJS.Timeout[]>([]);
   const refShouldCapture = useRef(true);
 
@@ -51,7 +51,8 @@ export default function CanvasBlurCapture({
               -edgeCompensation,
               -edgeCompensation,
               width + edgeCompensation * 2,
-              width * image.height / image.width + edgeCompensation * 2,
+              width * refImage.current.height / refImage.current.width +
+              edgeCompensation * 2,
             );
             refTimeouts.current.forEach(clearTimeout);
             onCapture(canvas.toDataURL('image/jpeg', quality));
@@ -70,11 +71,12 @@ export default function CanvasBlurCapture({
       }
     };
 
-    const image = new Image();
-    image.crossOrigin = 'anonymous';
-    image.src = imageUrl;
-    image.onload = capture;
-    refImage.current = image;
+    if (!refImage.current) {
+      refImage.current = new Image();
+    }
+    refImage.current.crossOrigin = 'anonymous';
+    refImage.current.src = imageUrl;
+    refImage.current.onload = capture;
 
     // Attempt delayed capture in case image.onload never fires
     refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));