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