Update index.html

index.html

@@ -94,22 +94,17 @@
             box-shadow: 0 4px 10px rgba(39, 174, 96, 0.2);
         }
 
-        /* الكانفاس أصبح مخفياً دائماً، نحن نستخدمه للرسم فقط وليس للعرض */
         canvas {
             display: none !important; 
         }
 
-        /* هذا هو عنصر الصورة الحقيقية الذي سيتم عرضه للمستخدم */
         #finalImage {
             width: 100%;
             height: auto;
             margin-top: 25px;
             border-radius: 16px;
             box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-            display: none; /* مخفي حتى تكتمل الصورة */
-            /* تحسينات اللمس للجوال */
-            -webkit-user-select: none;
-            user-select: none;
+            display: none; 
         }
 
         .hint {
@@ -131,17 +126,17 @@
         <button onclick="generateCard()">إنشاء البطاقة</button>
         
         <canvas id="myCanvas"></canvas>
-        
         <img id="finalImage" alt="تهنئة رمضان لأسرة العصيل">
         
         <button id="downloadBtn" onclick="downloadImage()">تحميل الصورة</button>
-        <p id="downloadHint" class="hint">ملاحظة: إذا لم يعمل زر التحميل، اضغط مطولاً على الصورة واختر "حفظ الصورة".</p>
+        <p id="downloadHint" class="hint">ملاحظة: إذا واجهت مشكلة، اختر "فتح الصورة بعلامة تبويب جديدة" ثم احفظها.</p>
     </div>
 
     <script>
         const canvas = document.getElementById('myCanvas');
         const ctx = canvas.getContext('2d');
         const image = new Image();
+        let imageBlobUrl = null; // متغير لحفظ رابط الملف الحقيقي
         
         image.crossOrigin = "Anonymous";
         image.src = 'template.jpg'; 
@@ -159,7 +154,7 @@
                 return;
             }
 
-            // 1. الرسم على الكانفاس المخفي
+            // الرسم
             ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
             ctx.font = "bold 80px 'Cairo'"; 
             ctx.fillStyle = "#000000"; 
@@ -168,34 +163,36 @@
             const yPosition = canvas.height - 350; 
             ctx.fillText(name, xPosition, yPosition);
 
-            // 2. تحويل الرسمة إلى صورة حقيقية وعرضها (هذا هو الحل لمشكلة التعليق!)
-            const finalImage = document.getElementById('finalImage');
-            finalImage.src = canvas.toDataURL("image/png");
-            finalImage.style.display = "block";
+            // تحويل الرسمة إلى ملف حقيقي (Blob) لكي تعمل أزرار التحميل
+            canvas.toBlob(function(blob) {
+                if (imageBlobUrl) {
+                    URL.revokeObjectURL(imageBlobUrl); // مسح الرابط القديم لعدم استهلاك الذاكرة
+                }
+                imageBlobUrl = URL.createObjectURL(blob);
+                
+                const finalImg = document.getElementById('finalImage');
+                finalImg.src = imageBlobUrl;
+                finalImg.style.display = "block";
 
-            // إظهار الأزرار
-            document.getElementById('downloadBtn').style.display = "block";
-            document.getElementById('downloadHint').style.display = "block";
-            
-            // التمرير للأسفل
-            setTimeout(() => {
-                window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-            }, 100);
+                document.getElementById('downloadBtn').style.display = "block";
+                document.getElementById('downloadHint').style.display = "block";
+                
+                setTimeout(() => {
+                    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+                }, 100);
+            }, 'image/png');
         }
 
         function downloadImage() {
-            // الآن نأخذ رابط التحميل من الصورة الحقيقية
-            try {
-                const finalImgSrc = document.getElementById('finalImage').src;
-                const link = document.createElement('a');
-                link.download = 'ramadan-mubarak.png';
-                link.href = finalImgSrc;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-            } catch (error) {
-                alert("عذراً، متصفحك يمنع التحميل المباشر. يرجى الضغط مطولاً على الصورة واختيار 'حفظ الصورة'.");
-            }
+            if (!imageBlobUrl) return;
+            
+            // إنشاء رابط تحميل مخفي والضغط عليه برمجياً
+            const link = document.createElement('a');
+            link.href = imageBlobUrl;
+            link.download = 'Ramadan-Mubarak.png';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
         }
     </script>
 </body>