Fix download functionality: Implement html2canvas for greeting card downloads

sunmughan · sunmughan · commit c15c03aa436f · 2025-08-02T23:18:14.000+05:30
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="styles.css">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 </head>
 <body>
     <div class="container">
diff --git a/script.js b/script.js
@@ -316,9 +316,39 @@ class FriendshipGreetingApp {
         }
     }
 
-    downloadGreeting() {
-        // In a real app, you would use html2canvas or similar library
-        this.showNotification('Download feature would be implemented with html2canvas library!', 'info');
+    async downloadCard() {
+        try {
+            const greetingCard = document.getElementById('greetingCard');
+            
+            // Show loading notification
+            this.showNotification('Generating your greeting card...', 'info');
+            
+            // Configure html2canvas options
+            const canvas = await html2canvas(greetingCard, {
+                backgroundColor: null,
+                scale: 2, // Higher quality
+                useCORS: true,
+                allowTaint: true,
+                logging: false,
+                width: greetingCard.offsetWidth,
+                height: greetingCard.offsetHeight
+            });
+            
+            // Create download link
+            const link = document.createElement('a');
+            link.download = `friendship-greeting-${Date.now()}.png`;
+            link.href = canvas.toDataURL('image/png');
+            
+            // Trigger download
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            
+            this.showNotification('Greeting card downloaded successfully!', 'success');
+        } catch (error) {
+            console.error('Download error:', error);
+            this.showNotification('Failed to download greeting card. Please try again.', 'error');
+        }
     }
 
     shareGreeting() {
