Update index.html

index.html

@@ -439,7 +439,7 @@
                 >
                     <span v-if="!isGenerating">
                         <i class="fa-solid fa-file-export"></i>
-                        匯出設計 (PDF / PPTX)
+                        匯出設計 (PDF / PPTX / JPG)
                     </span>
                     <span v-else>
                         <!-- Spinner -->
@@ -492,7 +492,7 @@
                 </div>
             </div>
 
-            <!-- Export PDF/PPTX Modal -->
+            <!-- Export PDF/PPTX/JPG Modal -->
             <div v-if="showExportModal" class="absolute inset-0 z-50 bg-slate-900/50 flex items-center justify-center p-4 animate-fade-in">
                 <div class="bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden">
                     <div class="bg-indigo-600 px-6 py-4">
@@ -511,7 +511,7 @@
                             <input type="text" v-model="exportProjectName" placeholder="例如：我的幸運草" class="w-full border-2 border-slate-200 rounded-lg p-2 focus:border-indigo-500 focus:outline-none">
                         </div>
                         
-                        <!-- NEW: Checkbox for removing grid on page 2 -->
+                        <!-- Checkbox for removing grid on page 2 -->
                         <div class="flex items-center gap-2 border-t border-slate-100 pt-3">
                             <input type="checkbox" id="removeGridPage2" v-model="removeGridOnPage2" class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
                             <label for="removeGridPage2" class="text-sm font-bold text-slate-700 cursor-pointer">
@@ -526,6 +526,10 @@
                         <button @click="processExport('pptx')" class="w-full py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg transition-all shadow-md flex items-center justify-center gap-2">
                             <i class="fa-solid fa-file-powerpoint"></i> 下載可編輯 PPTX
                         </button>
+                        <!-- JPG Button -->
+                        <button @click="processExport('jpg')" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg transition-all shadow-md flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-image"></i> 下載 JPG 圖片 (雙頁)
+                        </button>
                         <button @click="showExportModal = false" class="w-full py-2 text-slate-500 hover:text-slate-700 font-bold text-sm mt-1">取消</button>
                     </div>
                 </div>
@@ -1393,6 +1397,8 @@
                     exportPDF();
                 } else if (type === 'pptx') {
                     exportPPTX();
+                } else if (type === 'jpg') {
+                    exportJPG();
                 }
             };
 
@@ -1620,6 +1626,43 @@
                 }
             };
 
+            const exportJPG = async () => {
+                if (selectedCellIndices.value.size > 0) clearSelection();
+                isGenerating.value = true;
+
+                // Filename base
+                let fileNameBase = 'magic-origami';
+                const namePart = exportName.value ? exportName.value : '';
+                const projPart = exportProjectName.value ? exportProjectName.value : '';
+                if (namePart || projPart) fileNameBase = `${namePart}${namePart && projPart ? '-' : ''}${projPart || '作品'}`;
+
+                try {
+                    // Page 1
+                    const canvas1 = await renderPageToCanvas(1, false);
+                    const link1 = document.createElement('a');
+                    link1.href = canvas1.toDataURL('image/jpeg', 1.0);
+                    link1.download = `${fileNameBase}-第1頁.jpg`;
+                    link1.click();
+
+                    // Small delay to prevent browser blocking multiple downloads
+                    await new Promise(r => setTimeout(r, 500));
+
+                    // Page 2
+                    const canvas2 = await renderPageToCanvas(2, removeGridOnPage2.value);
+                    const link2 = document.createElement('a');
+                    link2.href = canvas2.toDataURL('image/jpeg', 1.0);
+                    link2.download = `${fileNameBase}-第2頁.jpg`;
+                    link2.click();
+
+                } catch (err) {
+                    console.error(err);
+                    alert("JPG 生成發生錯誤");
+                } finally {
+                    isGenerating.value = false;
+                    document.getElementById('pdf-generator-container').innerHTML = '';
+                }
+            };
+
             return {
                 gridOptions,
                 currentGrid,