fix:优化图片清晰度

This commit is contained in:
Zhukj
2026-04-20 17:44:24 +08:00
parent b001f24ebd
commit 4f598525e1

View File

@@ -1778,6 +1778,13 @@
document.body.appendChild(menu); document.body.appendChild(menu);
} }
// 从 blob 显示预览
function showPreviewFromBlob(blob) {
console.log('预览图片大小:', (blob.size / 1024).toFixed(2), 'KB');
const dataUrl = URL.createObjectURL(blob);
showPreviewModal(dataUrl, blob);
}
// 显示预览 // 显示预览
async function showPreview() { async function showPreview() {
const canvas = await generateCanvas(); const canvas = await generateCanvas();
@@ -1787,6 +1794,11 @@
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png', 1.0)); const blob = await new Promise(resolve => canvas.toBlob(resolve, '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); const dataUrl = URL.createObjectURL(blob);
showPreviewModal(dataUrl, blob);
}
// 显示预览弹窗
function showPreviewModal(dataUrl, blob) {
const tipOverlay = document.createElement('div'); const tipOverlay = document.createElement('div');
tipOverlay.id = 'previewTip'; tipOverlay.id = 'previewTip';
@@ -1806,7 +1818,7 @@
`; `;
const tipText = document.createElement('p'); const tipText = document.createElement('p');
tipText.textContent = '长按图片保存到相册'; tipText.innerHTML = '长按图片保存到相册<br><span style="font-size:14px;opacity:0.8">(预览已缩放,实际保存为高清原图)</span>';
tipText.style.cssText = ` tipText.style.cssText = `
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
@@ -1846,7 +1858,7 @@
`; `;
saveBtn.onclick = async () => { saveBtn.onclick = async () => {
tipOverlay.remove(); tipOverlay.remove();
await saveImageToGallery(dataUrl); await saveImageToGallery(dataUrl, blob);
}; };
const closeBtn = document.createElement('button'); const closeBtn = document.createElement('button');
@@ -1871,13 +1883,17 @@
} }
// 保存图片到相册 // 保存图片到相册
async function saveImageToGallery(dataUrl) { async function saveImageToGallery(dataUrl, blob) {
const filename = '邀请函_' + Date.now() + '.png'; const filename = '邀请函_' + Date.now() + '.png';
// 如果没有传入 blob,尝试从 window._lastExportBlob 获取
if (!blob && window._lastExportBlob) {
blob = window._lastExportBlob;
}
// 尝试使用 File System Access API (Android/Chrome) // 尝试使用 File System Access API (Android/Chrome)
if ('showSaveFilePicker' in window) { if ('showSaveFilePicker' in window) {
try { try {
const blob = await (await fetch(dataUrl)).blob();
const handle = await window.showSaveFilePicker({ const handle = await window.showSaveFilePicker({
suggestedName: filename, suggestedName: filename,
types: [{ types: [{
@@ -1898,7 +1914,6 @@
// 尝试使用 Web Share API (iOS Safari) // 尝试使用 Web Share API (iOS Safari)
if (navigator.share && navigator.canShare) { if (navigator.share && navigator.canShare) {
try { try {
const blob = await (await fetch(dataUrl)).blob();
const file = new File([blob], filename, { type: 'image/png' }); const file = new File([blob], filename, { type: 'image/png' });
if (navigator.canShare({ files: [file] })) { if (navigator.canShare({ files: [file] })) {
@@ -2248,6 +2263,9 @@
const dataUrl = URL.createObjectURL(blob); const dataUrl = URL.createObjectURL(blob);
const filename = '邀请函_' + Date.now() + '.png'; const filename = '邀请函_' + Date.now() + '.png';
// 保存 blob 供后续使用
window._lastExportBlob = blob;
const tipOverlay = document.createElement('div'); const tipOverlay = document.createElement('div');
tipOverlay.id = 'mobileSaveTip'; tipOverlay.id = 'mobileSaveTip';
tipOverlay.style.cssText = ` tipOverlay.style.cssText = `
@@ -2342,7 +2360,7 @@
`; `;
previewBtn.onclick = () => { previewBtn.onclick = () => {
tipOverlay.remove(); tipOverlay.remove();
showPreview(); showPreviewFromBlob(blob);
}; };
// 插入到标题后面 // 插入到标题后面