fix:优化图片清晰度
This commit is contained in:
30
js/script.js
30
js/script.js
@@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 插入到标题后面
|
// 插入到标题后面
|
||||||
|
|||||||
Reference in New Issue
Block a user