fix：提高图片清晰度

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
+        // 固定高清分辨率 1080×1920
-        const BASE_WIDTH = 1080;
+        const TARGET_WIDTH = 1080;
-        const BASE_HEIGHT = 1920;
+        const TARGET_HEIGHT = 1920;
         
-        // 根据背景图原始分辨率调整目标分辨率
+        console.log('目标画布尺寸:', TARGET_WIDTH, 'x', TARGET_HEIGHT);
-        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);
         
         // 显示尺寸（用于计算缩放比例）
         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 = '';
             }
         });