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() {
|
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);
|
||||||
|
|||||||
Reference in New Issue
Block a user