// ==UserScript== // @name 浏览器图片增强工具 // @namespace http://tampermonkey.net/ // @version 1.1.2 // @description 实现对浏览器中的图片进行旋转、放大和下载的功能 // @author sanzhixiaoxia // @match *://*/* // @grant none // @license AGPL-3.0-or-later // @downloadURL https://update.greasyfork.icu/scripts/510107/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%9B%BE%E7%89%87%E5%A2%9E%E5%BC%BA%E5%B7%A5%E5%85%B7.user.js // @updateURL https://update.greasyfork.icu/scripts/510107/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%9B%BE%E7%89%87%E5%A2%9E%E5%BC%BA%E5%B7%A5%E5%85%B7.meta.js // ==/UserScript== (function () { 'use strict'; // 添加样式 const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .img-toolbox { position: absolute; z-index: 10000; display: none; background: rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 5px; } .img-toolbox button { background: none; border: none; color: white; cursor: pointer; margin: 0 2px; padding: 5px; font-size: 14px; } .img-toolbox button:hover { background: rgba(255, 255, 255, 0.2); } `; document.head.appendChild(style); // 工具条HTML模板 const toolboxTemplate = ` `; // 初始化工具条 function initToolbox() { const toolbox = document.createElement('div'); toolbox.classList.add('img-toolbox'); toolbox.innerHTML = toolboxTemplate; document.body.appendChild(toolbox); return toolbox; } const toolbox = initToolbox(); let currentImg = null; let rotation = 0; let scale = 1; let hoverTimeout = null; // 处理图片鼠标悬停事件 document.addEventListener('mouseover', (e) => { if (e.target.tagName === 'IMG') { currentImg = e.target; hoverTimeout = setTimeout(() => { const rect = currentImg.getBoundingClientRect(); toolbox.style.top = `${rect.top + window.scrollY}px`; toolbox.style.left = `${rect.left + window.scrollX}px`; toolbox.style.display = 'block'; }, 3000); } }); // 处理图片鼠标移出事件 document.addEventListener('mouseout', (e) => { if (e.target.tagName === 'IMG') { clearTimeout(hoverTimeout); if (!toolbox.contains(e.relatedTarget)) { toolbox.style.display = 'none'; resetTransform(); } } }); // 处理工具条鼠标移入事件(防止闪烁) toolbox.addEventListener('mouseover', () => { toolbox.style.display = 'block'; }); // 处理工具条鼠标移出事件(防止闪烁) toolbox.addEventListener('mouseout', (e) => { if (!currentImg || !currentImg.contains(e.relatedTarget)) { toolbox.style.display = 'none'; resetTransform(); } }); // 工具条按钮点击事件 toolbox.querySelector('.rotate-left').addEventListener('click', () => { if (currentImg) { rotation -= 90; updateTransform(); } }); toolbox.querySelector('.rotate-right').addEventListener('click', () => { if (currentImg) { rotation += 90; updateTransform(); } }); toolbox.querySelector('.zoom-in').addEventListener('click', () => { if (currentImg) { scale += 0.1; updateTransform(); } }); toolbox.querySelector('.zoom-out').addEventListener('click', () => { if (currentImg) { scale = Math.max(0.1, scale - 0.1); updateTransform(); } }); toolbox.querySelector('.download').addEventListener('click', () => { if (currentImg) { const link = document.createElement('a'); link.href = currentImg.src.startsWith('http') ? currentImg.src : currentImg.src.startsWith('/') ? `${window.location.origin}${currentImg.src}` : `${window.location.href}${currentImg.src}`; link.download = 'downloaded_image'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } }); function updateTransform() { currentImg.style.transform = `rotate(${rotation}deg) scale(${scale})`; } function resetTransform() { if (currentImg) { rotation = 0; scale = 1; currentImg.style.transform = `rotate(${rotation}deg) scale(${scale})`; } } })();