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:27:52 +08:00
parent 1ab1465144
commit 16de547957
1 changed files with 49 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
js/script.js
View File

@@ -1790,18 +1790,32 @@
const canvas = await generateCanvas();
console.log('预览画布尺寸:', canvas.width, 'x', canvas.height);
// 在 toBlob 之前再次确认 canvas 尺寸
console.log('预览 toBlob 前 canvas 尺寸:', canvas.width, 'x', canvas.height);
// 尝试使用 toDataURL 获取更高质量的图片
let dataUrl;
let blob;
try {
// 先尝试 toDataURL
dataUrl = canvas.toDataURL('image/png');
console.log('预览 toDataURL 成功，dataUrl 长度:', dataUrl.length);
// 将 dataUrl 转换为 blob
const response = await fetch(dataUrl);
blob = await response.blob();
console.log('预览 dataUrl 转 blob 成功，blob 尺寸:', blob.size, 'bytes');
} catch (err) {
console.log('预览 toDataURL 失败，使用 toBlob:', err);
// 如果 toDataURL 失败，使用 toBlob
blob = await new Promise(resolve => {
canvas.toBlob((b) => {
console.log('预览 toBlob 回调 - blob 尺寸:', b.size, 'bytes');
resolve(b);
}, 'image/png', 1.0);
});
dataUrl = URL.createObjectURL(blob);
}
// 使用 toBlob 获取更高质量的图片
const blob = await new Promise(resolve => {
canvas.toBlob((b) => {
console.log('预览 toBlob 回调 - blob 尺寸:', b.size, 'bytes');
resolve(b);
}, 'image/png', 1.0);
});
console.log('预览图片大小:', (blob.size / 1024).toFixed(2), 'KB');
const dataUrl = URL.createObjectURL(blob);
showPreviewModal(dataUrl, blob);
}
@@ -2295,15 +2309,32 @@
// 在 toBlob 之前再次确认 canvas 尺寸
console.log('toBlob 前 canvas 尺寸:', canvas.width, 'x', canvas.height);
// 使用 toBlob 获取更高质量的图片
const blob = await new Promise(resolve => {
canvas.toBlob((b) => {
console.log('toBlob 回调 - blob 尺寸:', b.size, 'bytes');
resolve(b);
}, 'image/png', 1.0);
});
// 尝试使用 toDataURL 获取更高质量的图片
let dataUrl;
let blob;
try {
// 先尝试 toDataURL
dataUrl = canvas.toDataURL('image/png');
console.log('toDataURL 成功，dataUrl 长度:', dataUrl.length);
// 将 dataUrl 转换为 blob
const response = await fetch(dataUrl);
blob = await response.blob();
console.log('dataUrl 转 blob 成功，blob 尺寸:', blob.size, 'bytes');
} catch (err) {
console.log('toDataURL 失败，使用 toBlob:', err);
// 如果 toDataURL 失败，使用 toBlob
blob = await new Promise(resolve => {
canvas.toBlob((b) => {
console.log('toBlob 回调 - blob 尺寸:', b.size, 'bytes');
resolve(b);
}, 'image/png', 1.0);
});
dataUrl = URL.createObjectURL(blob);
}
console.log('导出图片大小:', (blob.size / 1024).toFixed(2), 'KB');
const dataUrl = URL.createObjectURL(blob);
const filename = '邀请函_' + Date.now() + '.png';
// 保存 blob 供后续使用