WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：提高图片清晰度

Browse Source
This commit is contained in:
Zhukj
2026-04-20 18:17:02 +08:00
parent 32f0f38d3d
commit 5ded968665
1 changed files with 42 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
js/script.js
View File

@@ -1859,6 +1859,11 @@
saveBtn.onclick = async () => {
tipOverlay.remove();
await saveImageToGallery(dataUrl, blob);
// 重新隐藏 canvas
exportCanvas.setAttribute('hidden', '');
exportCanvas.style.position = '';
exportCanvas.style.left = '';
exportCanvas.style.top = '';
};
const closeBtn = document.createElement('button');
@@ -1872,7 +1877,14 @@
border-radius: 25px;
cursor: pointer;
`;
closeBtn.onclick = () => tipOverlay.remove();
closeBtn.onclick = () => {
tipOverlay.remove();
// 重新隐藏 canvas
exportCanvas.setAttribute('hidden', '');
exportCanvas.style.position = '';
exportCanvas.style.left = '';
exportCanvas.style.top = '';
};
btnContainer.appendChild(saveBtn);
btnContainer.appendChild(closeBtn);
@@ -1972,56 +1984,33 @@
}
}
// 生成画布（高清无损，根据背景图分辨率自适应）
// 生成画布（高清无损，固定 1080×1920 分辨率）
async function generateCanvas() {
const canvas = exportCanvas;
const ctx = canvas.getContext('2d');
const container = imageContainer;
// 基础分辨率 1080×1920
const BASE_WIDTH = 1080;
const BASE_HEIGHT = 1920;
// 固定高清分辨率 1080×1920
const TARGET_WIDTH = 1080;
const TARGET_HEIGHT = 1920;
// 根据背景图原始分辨率调整目标分辨率
let TARGET_WIDTH = BASE_WIDTH;
let TARGET_HEIGHT = BASE_HEIGHT;
if (currentImage) {
const imgWidth = currentImage.naturalWidth;
const imgHeight = currentImage.naturalHeight;
console.log('背景图原始尺寸:', imgWidth, 'x', imgHeight);
// 如果背景图分辨率高于基础分辨率，使用背景图分辨率
// 但不超过 4K (2160×3840) 以避免文件过大
const MAX_WIDTH = 2160;
const MAX_HEIGHT = 3840;
if (imgWidth >= BASE_WIDTH && imgHeight >= BASE_HEIGHT) {
// 使用背景图分辨率，但保持 9:16 比例
const imgRatio = imgWidth / imgHeight;
const targetRatio = BASE_WIDTH / BASE_HEIGHT;
if (imgRatio > targetRatio) {
// 图片更宽，以高度为基准
TARGET_HEIGHT = Math.min(imgHeight, MAX_HEIGHT);
TARGET_WIDTH = Math.round(TARGET_HEIGHT * targetRatio);
} else {
// 图片更高或比例相同，以宽度为基准
TARGET_WIDTH = Math.min(imgWidth, MAX_WIDTH);
TARGET_HEIGHT = Math.round(TARGET_WIDTH / targetRatio);
}
}
}
console.log('最终画布尺寸:', TARGET_WIDTH, 'x', TARGET_HEIGHT);
console.log('目标画布尺寸:', TARGET_WIDTH, 'x', TARGET_HEIGHT);
// 显示尺寸（用于计算缩放比例）
const displayWidth = container.clientWidth;
const displayHeight = container.clientHeight;
console.log('显示容器尺寸:', displayWidth, 'x', displayHeight);
// 临时显示 canvas 以避免浏览器对隐藏 canvas 的尺寸限制
canvas.removeAttribute('hidden');
canvas.style.position = 'fixed';
canvas.style.left = '-9999px';
canvas.style.top = '-9999px';
// 设置画布为高清分辨率
canvas.width = TARGET_WIDTH;
canvas.height = TARGET_HEIGHT;
console.log('实际画布尺寸:', canvas.width, 'x', canvas.height);
// 启用最高质量渲染
ctx.imageSmoothingEnabled = true;
@@ -2034,8 +2023,10 @@
// 计算从显示尺寸到目标分辨率的缩放比例
const scaleX = TARGET_WIDTH / displayWidth;
const scaleY = TARGET_HEIGHT / displayHeight;
console.log('缩放比例:', scaleX, 'x', scaleY);
if (currentImage) {
console.log('背景图原始尺寸:', currentImage.naturalWidth, 'x', currentImage.naturalHeight);
drawBgImageOnCanvasHD(ctx, currentImage, TARGET_WIDTH, TARGET_HEIGHT, scaleX, scaleY);
}
@@ -2352,7 +2343,7 @@
`;
saveBtn.onclick = async () => {
tipOverlay.remove();
await saveImageToGallery(dataUrl);
await saveImageToGallery(dataUrl, blob);
};
const cancelBtn = document.createElement('button');
@@ -2367,11 +2358,23 @@
border-radius: 10px;
cursor: pointer;
`;
cancelBtn.onclick = () => tipOverlay.remove();
cancelBtn.onclick = () => {
tipOverlay.remove();
// 重新隐藏 canvas
exportCanvas.setAttribute('hidden', '');
exportCanvas.style.position = '';
exportCanvas.style.left = '';
exportCanvas.style.top = '';
};
tipOverlay.addEventListener('click', (e) => {
if (e.target === tipOverlay) {
tipOverlay.remove();
// 重新隐藏 canvas
exportCanvas.setAttribute('hidden', '');
exportCanvas.style.position = '';
exportCanvas.style.left = '';
exportCanvas.style.top = '';
}
});