From 4d3565ff15a66310961e6c65961f67f757655dc0 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 1 Mar 2024 13:39:21 -0600
Subject: [PATCH] Prevent capturing blank blur data

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

diff --git a/src/components/CanvasBlurCapture.tsx b/src/components/CanvasBlurCapture.tsx
index 3bdd6d98..fa8650bb 100644
--- a/src/components/CanvasBlurCapture.tsx
+++ b/src/components/CanvasBlurCapture.tsx
@@ -23,15 +23,19 @@ export default function CanvasBlurCapture({
   scale?: number
   quality?: number
 }) {
-  const refCanvas = useRef<HTMLCanvasElement>(null);
+  const refCanvas = useRef<HTMLCanvasElement | null>(null);
+  const refImage = useRef<HTMLImageElement | null>(null);
   const refTimeouts = useRef<NodeJS.Timeout[]>([]);
   const refShouldCapture = useRef(true);
 
   useEffect(() => {
     const capture = () => {
       if (refShouldCapture.current) {
-        const canvas = refCanvas.current;
-        if (canvas) {
+        if (
+          refCanvas.current &&
+          refImage.current?.complete
+        ) {
+          const canvas = refCanvas.current;
           canvas.width = width * scale;
           canvas.height = height * scale;
           canvas.style.width = `${width}px`;
@@ -43,7 +47,7 @@ export default function CanvasBlurCapture({
               'contrast(1.2) saturate(1.2)' +
               `blur(${scale * 10}px)`;
             context.drawImage(
-              image,
+              refImage.current,
               -edgeCompensation,
               -edgeCompensation,
               width + edgeCompensation * 2,
@@ -58,7 +62,8 @@ export default function CanvasBlurCapture({
             refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
           }
         } else {
-          console.error('Cannot generate blur data: canvas not found');
+          // eslint-disable-next-line max-len
+          console.error('Cannot generate blur data: canvas/image not ready');
           // Retry capture in case canvas is not available
           refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
         }
@@ -69,6 +74,7 @@ export default function CanvasBlurCapture({
     image.crossOrigin = 'anonymous';
     image.src = imageUrl;
     image.onload = capture;
+    refImage.current = image;
 
     // Attempt delayed capture in case image.onload never fires
     refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));