fix: 画布导出规格改为1080×1920高清PNG,提升渲染分辨率,解决图文模糊锯齿问题

This commit is contained in:
Zhukj
2026-04-20 17:14:25 +08:00
parent 1b11523397
commit f52e9f2618

View File

@@ -1952,39 +1952,38 @@
}
}
// 生成画布(所见即所得 - 使用显示尺寸)
// 生成画布(固定分辨率 1080×1920 高清无损)
async function generateCanvas() {
const canvas = exportCanvas;
const ctx = canvas.getContext('2d');
const container = imageContainer;
// 高清渲染倍数
const scaleFactor = 2;
// 固定高清分辨率 1080×1920
const TARGET_WIDTH = 1080;
const TARGET_HEIGHT = 1920;
// 显示尺寸
// 显示尺寸(用于计算缩放比例)
const displayWidth = container.clientWidth;
const displayHeight = container.clientHeight;
// 高清画布尺寸(2倍)
const width = displayWidth * scaleFactor;
const height = displayHeight * scaleFactor;
// 设置画布为固定高清分辨率
canvas.width = TARGET_WIDTH;
canvas.height = TARGET_HEIGHT;
canvas.width = width;
canvas.height = height;
// 启用高清渲染
// 启用最高质量渲染
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
// 白色背景
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, width, height);
ctx.fillRect(0, 0, TARGET_WIDTH, TARGET_HEIGHT);
// 计算缩放比例
const scaleX = width / displayWidth;
const scaleY = height / displayHeight;
// 计算从显示尺寸到目标分辨率的缩放比例
const scaleX = TARGET_WIDTH / displayWidth;
const scaleY = TARGET_HEIGHT / displayHeight;
if (currentImage) {
drawBgImageOnCanvasHD(ctx, currentImage, width, height, scaleX, scaleY);
drawBgImageOnCanvasHD(ctx, currentImage, TARGET_WIDTH, TARGET_HEIGHT, scaleX, scaleY);
}
await drawOverlayImagesHD(ctx, scaleX, scaleY);