feat: 实现移动端长按保存图片,删除分享功能
This commit is contained in:
94
js/script.js
94
js/script.js
@@ -648,17 +648,101 @@
|
||||
|
||||
try {
|
||||
const canvas = await generateCanvas();
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.download = '邀请函_' + Date.now() + '.png';
|
||||
link.href = canvas.toDataURL('image/png');
|
||||
link.click();
|
||||
showMobileSaveTip();
|
||||
} catch (err) {
|
||||
console.error('保存失败:', err);
|
||||
alert('保存失败,请重试');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示移动端保存选项
|
||||
function showMobileSaveTip() {
|
||||
const canvas = exportCanvas;
|
||||
const dataUrl = canvas.toDataURL('image/png');
|
||||
const filename = '邀请函_' + Date.now() + '.png';
|
||||
|
||||
const tipOverlay = document.createElement('div');
|
||||
tipOverlay.id = 'mobileSaveTip';
|
||||
tipOverlay.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
`;
|
||||
|
||||
const savePanel = document.createElement('div');
|
||||
savePanel.style.cssText = `
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 20px;
|
||||
padding-bottom: 40px;
|
||||
`;
|
||||
|
||||
const title = document.createElement('p');
|
||||
title.textContent = '保存图片';
|
||||
title.style.cssText = `
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
`;
|
||||
|
||||
const saveBtn = document.createElement('button');
|
||||
saveBtn.textContent = '保存到相册';
|
||||
saveBtn.style.cssText = `
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
background: #007AFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
`;
|
||||
saveBtn.onclick = () => {
|
||||
tipOverlay.remove();
|
||||
const link = document.createElement('a');
|
||||
link.download = filename;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
};
|
||||
|
||||
const cancelBtn = document.createElement('button');
|
||||
cancelBtn.textContent = '取消';
|
||||
cancelBtn.style.cssText = `
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
background: #F2F2F7;
|
||||
color: #333;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
cancelBtn.onclick = () => tipOverlay.remove();
|
||||
|
||||
tipOverlay.addEventListener('click', (e) => {
|
||||
if (e.target === tipOverlay) {
|
||||
tipOverlay.remove();
|
||||
}
|
||||
});
|
||||
|
||||
savePanel.appendChild(title);
|
||||
savePanel.appendChild(saveBtn);
|
||||
savePanel.appendChild(cancelBtn);
|
||||
tipOverlay.appendChild(savePanel);
|
||||
document.body.appendChild(tipOverlay);
|
||||
}
|
||||
|
||||
// 窗口大小改变时更新图片位置和边界
|
||||
window.addEventListener('resize', () => {
|
||||
if (currentImage) {
|
||||
|
||||
Reference in New Issue
Block a user