diff --git a/js/script.js b/js/script.js index e482900..1e338c5 100644 --- a/js/script.js +++ b/js/script.js @@ -522,6 +522,14 @@ menu.style.left = x + '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'); copyItem.className = 'context-menu-item'; copyItem.textContent = '复制图片'; @@ -538,11 +546,72 @@ hideContextMenu(); }); + menu.appendChild(previewItem); menu.appendChild(copyItem); menu.appendChild(saveItem); 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() { const existingMenu = document.getElementById('contextMenu'); @@ -741,6 +810,28 @@ savePanel.appendChild(cancelBtn); tipOverlay.appendChild(savePanel); 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); } // 窗口大小改变时更新图片位置和边界