From 6057088b609f816860b486bffa5886106520bf29 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Tue, 21 Apr 2026 09:42:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E9=AB=98=E6=B8=85?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E6=97=B6=E8=83=8C=E6=99=AF=E5=9B=BE=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E7=9A=84=E7=BC=A9=E6=94=BE=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/script.js | 62 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 47 insertions(+), 15 deletions(-)

diff --git a/js/script.js b/js/script.js
index b20e623..28ea185 100644
--- a/js/script.js
+++ b/js/script.js
@@ -2147,6 +2147,7 @@
 
         // 计算从显示尺寸到目标分辨率的缩放比例
         // 使用统一的缩放比例，保持宽高比，确保所见即所得
+        // 注意：必须在 canvas 尺寸验证之后计算 scale
         const scale = TARGET_WIDTH / displayWidth;
         console.log('统一缩放比例:', scale, '画布宽高比:', TARGET_WIDTH/TARGET_HEIGHT, '容器宽高比:', displayRatio);
 
@@ -2199,19 +2200,20 @@
 
     // 绘制背景图（高清版本）
     function drawBgImageOnCanvasHD(ctx, img, canvasWidth, canvasHeight, scale) {
-        // 使用与编辑时完全相同的计算逻辑，只是按比例缩放
-        const containerWidth = canvasWidth;
-        const containerHeight = canvasHeight;
+        // 先按显示容器的尺寸计算（与 updateBgImage 完全一致）
+        const displayContainer = imageContainer;
+        const displayWidth = displayContainer.clientWidth;
+        const displayHeight = displayContainer.clientHeight;
         const imgRatio = img.naturalWidth / img.naturalHeight;
-        const containerRatio = containerWidth / containerHeight;
+        const displayRatio = displayWidth / displayHeight;
         
         let imgWidth, imgHeight;
 
-        if (imgRatio > containerRatio) {
-            imgHeight = containerHeight;
+        if (imgRatio > displayRatio) {
+            imgHeight = displayHeight;
             imgWidth = imgHeight * imgRatio;
         } else {
-            imgWidth = containerWidth;
+            imgWidth = displayWidth;
             imgHeight = imgWidth / imgRatio;
         }
 
@@ -2219,13 +2221,32 @@
         const scaledWidth = imgWidth * bgImageScale;
         const scaledHeight = imgHeight * bgImageScale;
 
-        // 计算位置（与 updateBgImage 函数完全一致，只是按比例缩放偏移量）
-        const baseLeft = (containerWidth - scaledWidth) / 2;
-        const drawX = baseLeft + (imageOffsetX * scale);
-        const drawY = (containerHeight - scaledHeight) / 2;
+        // 计算位置（与 updateBgImage 函数完全一致）
+        const baseLeft = (displayWidth - scaledWidth) / 2;
+        const displayDrawX = baseLeft + imageOffsetX;
+        const displayDrawY = (displayHeight - scaledHeight) / 2;
+        
+        // 将显示坐标转换为 canvas 坐标
+        const drawX = displayDrawX * scale;
+        const drawY = displayDrawY * scale;
+        const canvasScaledWidth = scaledWidth * scale;
+        const canvasScaledHeight = scaledHeight * scale;
 
         ctx.globalAlpha = bgImageOpacity;
-        ctx.drawImage(img, drawX, drawY, scaledWidth, scaledHeight);
+        
+        // 调试信息
+        console.log('背景图绘制:', {
+            canvas: canvasWidth + 'x' + canvasHeight,
+            scale: scale,
+            displayDrawX: displayDrawX,
+            displayDrawY: displayDrawY,
+            drawX: drawX,
+            drawY: drawY,
+            canvasScaledWidth: canvasScaledWidth,
+            canvasScaledHeight: canvasScaledHeight
+        });
+        
+        ctx.drawImage(img, drawX, drawY, canvasScaledWidth, canvasScaledHeight);
         ctx.globalAlpha = 1;
     }
 
@@ -2373,8 +2394,18 @@
         const inputTop = inputElement.offsetTop * scale;
 
         const style = window.getComputedStyle(inputElement);
-        const fontSize = parseInt(style.fontSize) * scale; // 字体大小也按比例缩放
-        const lineHeight = parseFloat(style.lineHeight);
+        const originalFontSize = parseInt(style.fontSize);
+        const fontSize = originalFontSize * scale; // 字体大小也按比例缩放
+        
+        // lineHeight 可能是像素值或数字（倍数），需要正确处理
+        let lineHeight = parseFloat(style.lineHeight);
+        // 如果 lineHeight 是数字（小于 10 认为是倍数），转换为像素值
+        if (lineHeight && lineHeight < 10) {
+            lineHeight = lineHeight * originalFontSize * scale;
+        } else if (lineHeight) {
+            // 已经是像素值，按比例缩放
+            lineHeight = lineHeight * scale;
+        }
         
         // 微信中：使用更粗的字体权重以获得更好的可读性
         let fontWeight = style.fontWeight;
@@ -2393,7 +2424,8 @@
         }
 
         // 计算文本垂直偏移量，使其与 DOM 渲染一致
-        const actualLineHeight = (lineHeight || fontSize * 1.4);
+        // 使用缩放后的 lineHeight 计算
+        const actualLineHeight = lineHeight || fontSize * 1.4;
         const textOffsetY = (actualLineHeight - fontSize) / 2 + fontSize * 0.85;
 
         ctx.fillText(text, inputLeft, inputTop + textOffsetY);