Update static/infographic_gen.html

static/infographic_gen.html

@@ -151,19 +151,39 @@
 
             // Download infographic as an image
             $('#download-btn').click(function() {
-                const iframe = document.getElementById('output-frame');
-                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+            const iframe = document.getElementById('output-frame');
+            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 
-                html2canvas(iframeDocument.body).then(function(canvas) {
-                    const link = document.createElement('a');
-                    link.download = 'infographic.png';
-                    link.href = canvas.toDataURL();
-                    link.click();
-                }).catch(function(error) {
-                    alert('An error occurred while capturing the infographic: ' + error);
-                });
+            // Clone the iframe content into a div for rendering
+            const clonedContent = iframeDocument.body.cloneNode(true);
+
+            // Add external styles to the cloned content
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
+            clonedContent.appendChild(link);
+
+            // Wrap in a temporary container for rendering
+            const tempDiv = document.createElement('div');
+            tempDiv.appendChild(clonedContent);
+            document.body.appendChild(tempDiv);
+
+            // Use html2canvas to render the temporary container
+            html2canvas(tempDiv, {
+                useCORS: true, // Allow cross-origin styles
+                scale: 2, // Improve image quality
+            }).then(function(canvas) {
+                document.body.removeChild(tempDiv); // Clean up
+                const link = document.createElement('a');
+                link.download = 'infographic.png';
+                link.href = canvas.toDataURL('image/png');
+                link.click();
+            }).catch(function(error) {
+                document.body.removeChild(tempDiv); // Clean up
+                alert('An error occurred while capturing the infographic: ' + error);
             });
         });
+      });
     </script>
 </body>
 </html>