fix image download

maheshj01 · Jun 14, 2024 · 1aea2bc · 1aea2bc
1 parent bbf583a
commit 1aea2bc
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/src/app/(main)/_components/Preview.tsx b/src/app/(main)/_components/Preview.tsx
@@ -34,16 +34,35 @@ const Preview = ({ logId }: { logId: string }) => {
         setpreviewLog(log);
         setLoading(false);
     }
-
-    const downloadImage = () => {
+    const downloadImage = async () => {
         const preview = document.getElementById('preview');
-        html2canvas(preview!).then(function (canvas) {
+        if (!preview) return;
+
+        // Ensure all images within the preview element are fully loaded
+        const images = Array.from(preview.getElementsByTagName('img'));
+        await Promise.all(images.map(img => new Promise<void>((resolve, reject) => {
+            if (img.complete) {
+                resolve();
+            } else {
+                img.onload = () => resolve();
+                img.onerror = () => reject();
+            }
+            // Set crossOrigin attribute if needed
+            if (!img.crossOrigin) {
+                img.crossOrigin = 'anonymous';
+            }
+        })));
+
+        // Capture the canvas and download the image
+        html2canvas(preview, { useCORS: true }).then((canvas) => {
             const link = document.createElement('a');
             link.download = 'pastelog.png';
             link.href = canvas.toDataURL('image/png');
             link.click();
+        }).catch(error => {
+            console.error('Error capturing the canvas:', error);
         });
-    }
+    };
     useEffect(() => {
         if (logId) {
             fetchLogsById();