diff --git a/js/script.js b/js/script.js index 2f284e6..b03d5ff 100644 --- a/js/script.js +++ b/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);