Update index.html

index.html

@@ -203,7 +203,7 @@
                 <div class="magic-card p-1 rounded-2xl w-full relative magic-border mt-4 hover:scale-[1.02] transition-transform duration-500">
                     <div class="bg-slate-900 rounded-xl overflow-hidden relative z-10">
                         <!-- Changed classes to support landscape banner -->
-                        <!-- 注意：我們移除了 crossorigin="anonymous" 以確保畫面正常顯示，但這可能會影響截圖 -->
+                        <!-- 圖片來源將會是相對路徑，無需 crossorigin，且因為同源，截圖沒問題 -->
                         <img id="result-image" src="" alt="Role Image" class="w-full h-auto object-contain shadow-lg">
                     </div>
                 </div>
@@ -320,6 +320,8 @@
                 }
             ],
             
+            // 圖片已改為本地路徑 (Local Paths)
+            // 請確保 1.png, 2.png, 3.png, 4.png 與 index.html 位於同一目錄下
             resultsData: {
                 world: {
                     title: "世界架構師",
@@ -521,15 +523,6 @@
                 }, 500);
             },
 
-            restartQuiz: function() {
-                this.resultScreen.classList.add('fade-out');
-                setTimeout(() => {
-                    this.resultScreen.classList.add('hidden');
-                    this.resultScreen.classList.remove('fade-out');
-                    this.startQuiz();
-                }, 500);
-            },
-
             shareResult: async function() {
                 const shareBtn = document.getElementById('share-btn');
                 const originalContent = shareBtn.innerHTML;
@@ -547,18 +540,17 @@
                     captureElement.style.backgroundColor = '#0f172a'; // Dark blue bg
                     captureElement.style.padding = '20px'; // Add padding for screenshot
 
-                    // Wait for image to load before capturing
-                    // 確保圖片載入完成，否則截圖可能是空白
+                    // 關鍵修正：等待圖片載入完成，確保截圖不空白
                     const resultImage = document.getElementById('result-image');
                     if (!resultImage.complete) {
                         await new Promise((resolve) => { resultImage.onload = resolve; });
                     }
 
+                    // 簡化後的 html2canvas，移除 proxy 邏輯
                     const canvas = await html2canvas(captureElement, {
                         backgroundColor: '#0f172a',
                         scale: 2, // High resolution
-                        useCORS: true, // 嘗試跨域載入圖片
-                        allowTaint: true, // 允許繪製（即使可能 tainted）
+                        useCORS: true, // 同源圖片使用這個屬性依然安全且標準
                         logging: false
                     });
 
@@ -604,7 +596,7 @@
 
                 } catch (error) {
                     console.error('Error generating image:', error);
-                    alert('圖片生成失敗，可能是因為圖片伺服器限制了存取。請嘗試使用手機的原生截圖功能分享！');
+                    alert('圖片生成失敗，請稍後再試或使用手機原生截圖。');
                     shareBtn.innerHTML = originalContent;
                     shareBtn.disabled = false;
                 }