fix: 画布导出规格改为1080×1920高清PNG,提升渲染分辨率,解决图文模糊锯齿问题
This commit is contained in:
31
js/script.js
31
js/script.js
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user