fix: 修正高清导出时背景图和文本的缩放计算逻辑

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);