fix:优化导出图片清晰度

This commit is contained in:
Zhukj
2026-04-20 18:27:52 +08:00
parent 1ab1465144
commit 16de547957

View File

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