Recalculate blur data when aspect ratio changes

src/components/CanvasBlurCapture.tsx

@@ -24,43 +24,40 @@ export default function CanvasBlurCapture({
   quality?: number
 }) {
   const refCanvas = useRef<HTMLCanvasElement>(null);
-  const refHasCompleted = useRef(false);
   const refTimeouts = useRef<NodeJS.Timeout[]>([]);
 
   useEffect(() => {
     const capture = () => {
-      if (!refHasCompleted.current) {
+      const canvas = refCanvas.current;
-        const canvas = refCanvas.current;
+      if (canvas) {
-        if (canvas) {
+        canvas.width = width * scale;
-          canvas.width = width * scale;
+        canvas.height = height * scale;
-          canvas.height = height * scale;
+        canvas.style.width = `${width}px`;
-          canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
-          canvas.style.height = `${height}px`;
+        const context = refCanvas.current?.getContext('2d');
-          const context = refCanvas.current?.getContext('2d');
+        if (context) {
-          if (context) {
+          context.scale(scale, scale);
-            context.scale(scale, scale);
+          context.filter =
-            context.filter =
+            'contrast(1.2) saturate(1.2)' +
-              'contrast(1.2) saturate(1.2)' +
+            `blur(${scale * 10}px)`;
-              `blur(${scale * 10}px)`;
+          context.drawImage(
-            context.drawImage(
+            image,
-              image,
+            -edgeCompensation,
-              -edgeCompensation,
+            -edgeCompensation,
-              -edgeCompensation,
+            width + edgeCompensation * 2,
-              width + edgeCompensation * 2,
+            width * image.height / image.width + edgeCompensation * 2,
-              width * image.height / image.width + edgeCompensation * 2,
+          );
-            );
+          refTimeouts.current.forEach(clearTimeout);
-            refHasCompleted.current = true;
+          onCapture(canvas.toDataURL('image/jpeg', quality));
-            onCapture(canvas.toDataURL('image/jpeg', quality));
-          } else {
-            console.error('Cannot get 2d context');
-            // Retry capture in case canvas is not available
-            refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
-          }
         } else {
-          console.error('Cannot generate blur data: canvas not found');
+          console.error('Cannot get 2d context');
           // Retry capture in case canvas is not available
           refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
         }
+      } else {
+        console.error('Cannot generate blur data: canvas not found');
+        // Retry capture in case canvas is not available
+        refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
       }
     };
 

src/photo/PhotoForm.tsx

@@ -91,13 +91,11 @@ export default function PhotoForm({
   const url = formData.url ?? '';
 
   const updateBlurData = useCallback((blurData: string) => {
-    if (type === 'create') {
+    setFormData(data => ({
-      setFormData(data => ({
+      ...data,
-        ...data,
+      blurData,
-        blurData,
+    }));
-      }));
+  }, []);
-    }
-  }, [type]);
 
   const isFormValid = FORM_METADATA_ENTRIES.every(([key, { required }]) =>
     !required || Boolean(formData[key]));