From 5ded9686658c51153252c453e534ac4e952bded9 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Mon, 20 Apr 2026 18:17:02 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=8F=90=E9=AB=98=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=B8=85=E6=99=B0=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/script.js | 81 +++++++++++++++++++++++++++-------------------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/js/script.js b/js/script.js
index c743362..f017c74 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1859,6 +1859,11 @@
         saveBtn.onclick = async () => {
             tipOverlay.remove();
             await saveImageToGallery(dataUrl, blob);
+            // 重新隐藏 canvas
+            exportCanvas.setAttribute('hidden', '');
+            exportCanvas.style.position = '';
+            exportCanvas.style.left = '';
+            exportCanvas.style.top = '';
         };
 
         const closeBtn = document.createElement('button');
@@ -1872,7 +1877,14 @@
             border-radius: 25px;
             cursor: pointer;
         `;
-        closeBtn.onclick = () => tipOverlay.remove();
+        closeBtn.onclick = () => {
+            tipOverlay.remove();
+            // 重新隐藏 canvas
+            exportCanvas.setAttribute('hidden', '');
+            exportCanvas.style.position = '';
+            exportCanvas.style.left = '';
+            exportCanvas.style.top = '';
+        };
 
         btnContainer.appendChild(saveBtn);
         btnContainer.appendChild(closeBtn);
@@ -1972,56 +1984,33 @@
         }
     }
 
-    // 生成画布（高清无损，根据背景图分辨率自适应）
+    // 生成画布（高清无损，固定 1080×1920 分辨率）
     async function generateCanvas() {
         const canvas = exportCanvas;
         const ctx = canvas.getContext('2d');
         const container = imageContainer;
 
-        // 基础分辨率 1080×1920
-        const BASE_WIDTH = 1080;
-        const BASE_HEIGHT = 1920;
+        // 固定高清分辨率 1080×1920
+        const TARGET_WIDTH = 1080;
+        const TARGET_HEIGHT = 1920;
         
-        // 根据背景图原始分辨率调整目标分辨率
-        let TARGET_WIDTH = BASE_WIDTH;
-        let TARGET_HEIGHT = BASE_HEIGHT;
-        
-        if (currentImage) {
-            const imgWidth = currentImage.naturalWidth;
-            const imgHeight = currentImage.naturalHeight;
-            console.log('背景图原始尺寸:', imgWidth, 'x', imgHeight);
-            
-            // 如果背景图分辨率高于基础分辨率，使用背景图分辨率
-            // 但不超过 4K (2160×3840) 以避免文件过大
-            const MAX_WIDTH = 2160;
-            const MAX_HEIGHT = 3840;
-            
-            if (imgWidth >= BASE_WIDTH && imgHeight >= BASE_HEIGHT) {
-                // 使用背景图分辨率，但保持 9:16 比例
-                const imgRatio = imgWidth / imgHeight;
-                const targetRatio = BASE_WIDTH / BASE_HEIGHT;
-                
-                if (imgRatio > targetRatio) {
-                    // 图片更宽，以高度为基准
-                    TARGET_HEIGHT = Math.min(imgHeight, MAX_HEIGHT);
-                    TARGET_WIDTH = Math.round(TARGET_HEIGHT * targetRatio);
-                } else {
-                    // 图片更高或比例相同，以宽度为基准
-                    TARGET_WIDTH = Math.min(imgWidth, MAX_WIDTH);
-                    TARGET_HEIGHT = Math.round(TARGET_WIDTH / targetRatio);
-                }
-            }
-        }
-        
-        console.log('最终画布尺寸:', TARGET_WIDTH, 'x', TARGET_HEIGHT);
+        console.log('目标画布尺寸:', TARGET_WIDTH, 'x', TARGET_HEIGHT);
         
         // 显示尺寸（用于计算缩放比例）
         const displayWidth = container.clientWidth;
         const displayHeight = container.clientHeight;
+        console.log('显示容器尺寸:', displayWidth, 'x', displayHeight);
+        
+        // 临时显示 canvas 以避免浏览器对隐藏 canvas 的尺寸限制
+        canvas.removeAttribute('hidden');
+        canvas.style.position = 'fixed';
+        canvas.style.left = '-9999px';
+        canvas.style.top = '-9999px';
         
         // 设置画布为高清分辨率
         canvas.width = TARGET_WIDTH;
         canvas.height = TARGET_HEIGHT;
+        console.log('实际画布尺寸:', canvas.width, 'x', canvas.height);
 
         // 启用最高质量渲染
         ctx.imageSmoothingEnabled = true;
@@ -2034,8 +2023,10 @@
         // 计算从显示尺寸到目标分辨率的缩放比例
         const scaleX = TARGET_WIDTH / displayWidth;
         const scaleY = TARGET_HEIGHT / displayHeight;
+        console.log('缩放比例:', scaleX, 'x', scaleY);
 
         if (currentImage) {
+            console.log('背景图原始尺寸:', currentImage.naturalWidth, 'x', currentImage.naturalHeight);
             drawBgImageOnCanvasHD(ctx, currentImage, TARGET_WIDTH, TARGET_HEIGHT, scaleX, scaleY);
         }
 
@@ -2352,7 +2343,7 @@
         `;
         saveBtn.onclick = async () => {
             tipOverlay.remove();
-            await saveImageToGallery(dataUrl);
+            await saveImageToGallery(dataUrl, blob);
         };
 
         const cancelBtn = document.createElement('button');
@@ -2367,11 +2358,23 @@
             border-radius: 10px;
             cursor: pointer;
         `;
-        cancelBtn.onclick = () => tipOverlay.remove();
+        cancelBtn.onclick = () => {
+            tipOverlay.remove();
+            // 重新隐藏 canvas
+            exportCanvas.setAttribute('hidden', '');
+            exportCanvas.style.position = '';
+            exportCanvas.style.left = '';
+            exportCanvas.style.top = '';
+        };
 
         tipOverlay.addEventListener('click', (e) => {
             if (e.target === tipOverlay) {
                 tipOverlay.remove();
+                // 重新隐藏 canvas
+                exportCanvas.setAttribute('hidden', '');
+                exportCanvas.style.position = '';
+                exportCanvas.style.left = '';
+                exportCanvas.style.top = '';
             }
         });