fix:优化导出图片清晰度
This commit is contained in:
67
js/script.js
67
js/script.js
@@ -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 供后续使用
|
||||||
|
|||||||
Reference in New Issue
Block a user