From b312a6518c6ae0e56e9f4026eb3ffa338beeff3d Mon Sep 17 00:00:00 2001 From: Zhukj <3262118957> Date: Mon, 20 Apr 2026 14:07:30 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BC=A9=E5=B0=8F=E9=A1=B6=E9=83=A8?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E5=85=83=E7=B4=A0=E5=AE=BD=E5=BA=A6?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E5=9B=BE=E7=89=87=E5=88=B0=E7=9B=B8=E5=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 8 ++- js/script.js | 138 ++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 135 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 6115c37..2167604 100644 --- a/css/style.css +++ b/css/style.css @@ -31,7 +31,9 @@ html, body { } .btn { - padding: 10px 24px; + min-width: 72px; + height: 40px; + padding: 0 12px; font-size: 15px; border: 1px solid #ddd; border-radius: 6px; @@ -40,6 +42,9 @@ html, body { cursor: pointer; transition: all 0.2s; white-space: nowrap; + display: flex; + align-items: center; + justify-content: center; } .btn:active { @@ -47,6 +52,7 @@ html, body { } .btn-primary { + min-width: 100px; background: #4a90e2; color: #fff; border-color: #4a90e2; diff --git a/js/script.js b/js/script.js index 32c8fc4..f5aafdd 100644 --- a/js/script.js +++ b/js/script.js @@ -1766,7 +1766,7 @@ `; const tipText = document.createElement('p'); - tipText.textContent = '预览图片'; + tipText.textContent = '长按图片保存到相册'; tipText.style.cssText = ` color: #fff; font-size: 18px; @@ -1778,16 +1778,41 @@ img.src = dataUrl; img.style.cssText = ` max-width: 100%; - max-height: 80vh; + max-height: 70vh; border-radius: 8px; box-shadow: 0 4px 20px rgba(255,255,255,0.2); + -webkit-touch-callout: default; + -webkit-user-select: auto; + user-select: auto; `; + const btnContainer = document.createElement('div'); + btnContainer.style.cssText = ` + display: flex; + gap: 12px; + margin-top: 20px; + `; + + const saveBtn = document.createElement('button'); + saveBtn.textContent = '保存到相册'; + saveBtn.style.cssText = ` + padding: 12px 30px; + font-size: 16px; + background: #007AFF; + color: #fff; + border: none; + border-radius: 25px; + cursor: pointer; + `; + saveBtn.onclick = async () => { + tipOverlay.remove(); + await saveImageToGallery(dataUrl); + }; + const closeBtn = document.createElement('button'); closeBtn.textContent = '关闭'; closeBtn.style.cssText = ` - margin-top: 20px; - padding: 12px 40px; + padding: 12px 30px; font-size: 16px; background: #fff; color: #333; @@ -1797,12 +1822,70 @@ `; closeBtn.onclick = () => tipOverlay.remove(); + btnContainer.appendChild(saveBtn); + btnContainer.appendChild(closeBtn); tipOverlay.appendChild(tipText); tipOverlay.appendChild(img); - tipOverlay.appendChild(closeBtn); + tipOverlay.appendChild(btnContainer); document.body.appendChild(tipOverlay); } + // 保存图片到相册 + async function saveImageToGallery(dataUrl) { + const filename = '邀请函_' + Date.now() + '.png'; + + // 尝试使用 File System Access API (Android/Chrome) + if ('showSaveFilePicker' in window) { + try { + const blob = await (await fetch(dataUrl)).blob(); + const handle = await window.showSaveFilePicker({ + suggestedName: filename, + types: [{ + description: 'PNG 图片', + accept: { 'image/png': ['.png'] } + }] + }); + const writable = await handle.createWritable(); + await writable.write(blob); + await writable.close(); + showToast('图片已保存到相册'); + return; + } catch (err) { + console.log('File System Access API 失败，使用传统方式'); + } + } + + // 尝试使用 Web Share API (iOS Safari) + if (navigator.share && navigator.canShare) { + try { + const blob = await (await fetch(dataUrl)).blob(); + const file = new File([blob], filename, { type: 'image/png' }); + + if (navigator.canShare({ files: [file] })) { + await navigator.share({ + files: [file], + title: '邀请函', + text: '保存邀请函图片' + }); + showToast('图片已分享'); + return; + } + } catch (err) { + console.log('Web Share API 失败，使用传统方式'); + } + } + + // 传统下载方式 + const link = document.createElement('a'); + link.download = filename; + link.href = dataUrl; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + showToast('图片已保存，请在相册中查看'); + } + // 隐藏右键菜单 function hideContextMenu() { const existingMenu = document.getElementById('contextMenu'); @@ -2039,12 +2122,9 @@ cursor: pointer; margin-bottom: 12px; `; - saveBtn.onclick = () => { + saveBtn.onclick = async () => { tipOverlay.remove(); - const link = document.createElement('a'); - link.download = filename; - link.href = dataUrl; - link.click(); + await saveImageToGallery(dataUrl); }; const cancelBtn = document.createElement('button'); @@ -2096,6 +2176,44 @@ savePanel.insertBefore(previewBtn, saveBtn); } + // 显示 Toast 提示 + function showToast(message) { + const toast = document.createElement('div'); + toast.style.cssText = ` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.8); + color: #fff; + padding: 16px 24px; + border-radius: 8px; + font-size: 14px; + z-index: 10001; + pointer-events: none; + animation: fadeInOut 2s ease forwards; + `; + toast.textContent = message; + + // 添加动画样式 + if (!document.getElementById('toastStyle')) { + const style = document.createElement('style'); + style.id = 'toastStyle'; + style.textContent = ` + @keyframes fadeInOut { + 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } + 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } + 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } + 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } + } + `; + document.head.appendChild(style); + } + + document.body.appendChild(toast); + setTimeout(() => toast.remove(), 2000); + } + // 窗口大小改变时更新图片位置和边界 window.addEventListener('resize', () => { if (currentImage) {