feat: 新增右键/长按预览功能,保留原有操作样式
This commit is contained in:
91
js/script.js
91
js/script.js
@@ -522,6 +522,14 @@
|
|||||||
menu.style.left = x + 'px';
|
menu.style.left = x + 'px';
|
||||||
menu.style.top = y + 'px';
|
menu.style.top = y + 'px';
|
||||||
|
|
||||||
|
const previewItem = document.createElement('div');
|
||||||
|
previewItem.className = 'context-menu-item';
|
||||||
|
previewItem.textContent = '预览图片';
|
||||||
|
previewItem.addEventListener('click', () => {
|
||||||
|
showPreview();
|
||||||
|
hideContextMenu();
|
||||||
|
});
|
||||||
|
|
||||||
const copyItem = document.createElement('div');
|
const copyItem = document.createElement('div');
|
||||||
copyItem.className = 'context-menu-item';
|
copyItem.className = 'context-menu-item';
|
||||||
copyItem.textContent = '复制图片';
|
copyItem.textContent = '复制图片';
|
||||||
@@ -538,11 +546,72 @@
|
|||||||
hideContextMenu();
|
hideContextMenu();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
menu.appendChild(previewItem);
|
||||||
menu.appendChild(copyItem);
|
menu.appendChild(copyItem);
|
||||||
menu.appendChild(saveItem);
|
menu.appendChild(saveItem);
|
||||||
document.body.appendChild(menu);
|
document.body.appendChild(menu);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 显示预览
|
||||||
|
async function showPreview() {
|
||||||
|
const canvas = await generateCanvas();
|
||||||
|
const dataUrl = canvas.toDataURL('image/png');
|
||||||
|
|
||||||
|
const tipOverlay = document.createElement('div');
|
||||||
|
tipOverlay.id = 'previewTip';
|
||||||
|
tipOverlay.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.9);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10000;
|
||||||
|
padding: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const tipText = document.createElement('p');
|
||||||
|
tipText.textContent = '预览图片';
|
||||||
|
tipText.style.cssText = `
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = dataUrl;
|
||||||
|
img.style.cssText = `
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 80vh;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 20px rgba(255,255,255,0.2);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const closeBtn = document.createElement('button');
|
||||||
|
closeBtn.textContent = '关闭';
|
||||||
|
closeBtn.style.cssText = `
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 12px 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #fff;
|
||||||
|
color: #333;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
`;
|
||||||
|
closeBtn.onclick = () => tipOverlay.remove();
|
||||||
|
|
||||||
|
tipOverlay.appendChild(tipText);
|
||||||
|
tipOverlay.appendChild(img);
|
||||||
|
tipOverlay.appendChild(closeBtn);
|
||||||
|
document.body.appendChild(tipOverlay);
|
||||||
|
}
|
||||||
|
|
||||||
// 隐藏右键菜单
|
// 隐藏右键菜单
|
||||||
function hideContextMenu() {
|
function hideContextMenu() {
|
||||||
const existingMenu = document.getElementById('contextMenu');
|
const existingMenu = document.getElementById('contextMenu');
|
||||||
@@ -741,6 +810,28 @@
|
|||||||
savePanel.appendChild(cancelBtn);
|
savePanel.appendChild(cancelBtn);
|
||||||
tipOverlay.appendChild(savePanel);
|
tipOverlay.appendChild(savePanel);
|
||||||
document.body.appendChild(tipOverlay);
|
document.body.appendChild(tipOverlay);
|
||||||
|
|
||||||
|
// 添加预览按钮
|
||||||
|
const previewBtn = document.createElement('button');
|
||||||
|
previewBtn.textContent = '预览图片';
|
||||||
|
previewBtn.style.cssText = `
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #34C759;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
`;
|
||||||
|
previewBtn.onclick = () => {
|
||||||
|
tipOverlay.remove();
|
||||||
|
showPreview();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 插入到标题后面
|
||||||
|
savePanel.insertBefore(previewBtn, saveBtn);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 窗口大小改变时更新图片位置和边界
|
// 窗口大小改变时更新图片位置和边界
|
||||||
|
|||||||
Reference in New Issue
Block a user