获取图片URL和二维码信息并提供复制功能

Ctrl+右键点击图片时:显示URL、并识别其中可能存在的二维码(目前来看png格式最佳)
当前为 2024-09-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         获取图片URL和二维码信息并提供复制功能
// @namespace    http://tampermonkey.net/
// @version      0.2.1
// @description  Ctrl+右键点击图片时:显示URL、并识别其中可能存在的二维码(目前来看png格式最佳)
// @match        *://*/*
// @grant        GM_setClipboard
// @grant        GM_addStyle
// @license      GPL-3.0
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        #imageUrlPopup {
            position: fixed;
            background: #ffffff;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            font-family: Arial, sans-serif;
            max-width: 80%;  // 增加最大宽度
            height: auto;  // 自动调整宽度
        }
        #imageUrlPopup p {
            margin: 0 0 10px 0;
            font-weight: bold;
            color: #333;
        }
        #imageUrlPopup textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
            font-size: 14px;
            resize: none;
            //overflow: hidden;
            min-height: 20px;
            max-height: 150px;
            text-align: justify;  // 添加两端对齐
        }
        #imageUrlPopup button {
            width: 100%;
            padding: 8px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        #imageUrlPopup button:hover {
            background-color: #45a049;
        }
    `);

    // 用于存储当前弹窗的变量
    let currentPopup = null;

    // 监听整个文档的右键点击事件
    document.addEventListener('contextmenu', function(e) {
        // 检查是否同时按下Ctrl键和右键点击的是否为图片
        if (e.ctrlKey && e.target.tagName.toLowerCase() === 'img') {
            e.preventDefault();  // 阻止默认的右键菜单
            var imageUrl = e.target.src;  // 获取图片的URL
            showPopup(imageUrl, e.clientX, e.clientY);  // 显示自定义弹窗
        }
    }, false);

    // 显示弹窗的函数
    function showPopup(imageUrl, x, y) {
        // 如果存在当前弹窗，先将其关闭
        if (currentPopup) {
            document.body.removeChild(currentPopup);
        }

        // 创建弹窗元素
        var popup = document.createElement('div');
        popup.id = 'imageUrlPopup';
        // 设置弹窗内容
        popup.innerHTML = `
            <p>图片URL</p>
            <textarea readonly>${imageUrl}</textarea>
            <button id="copyUrlButton">复制URL到剪贴板</button>
            <p id="qrResult">正在识别二维码...</p>
            <textarea id="qrTextarea" readonly style="display:none;"></textarea>
            <button id="copyQrButton" style="display:none;">复制二维码信息</button>
        `;

        // 将弹窗添加到页面
        document.body.appendChild(popup);

        // 居中弹窗
        var rect = popup.getBoundingClientRect();
        var centerX = (window.innerWidth - rect.width) / 2;
        var centerY = (window.innerHeight - rect.height) / 2;
        popup.style.left = Math.max(0, centerX) + 'px';
        popup.style.top = Math.max(0, centerY) + 'px';

        // 自动调整textarea的高度
        var textareas = popup.querySelectorAll('textarea');
        textareas.forEach(autoResizeTextarea);

        // 更新当前弹窗
        currentPopup = popup;

        // 为复制URL按钮添加点击事件
        document.getElementById('copyUrlButton').addEventListener('click', function() {
            GM_setClipboard(imageUrl);  // 复制URL到剪贴板
            alert('图片URL已复制到剪贴板');  // 显示提示
            closePopup();  // 关闭弹窗
        });

        // 为复制二维码信息按钮添加点击事件
        document.getElementById('copyQrButton').addEventListener('click', function() {
            const qrData = document.getElementById('qrTextarea').value;
            GM_setClipboard(qrData);
            alert('二维码信息已复制到剪贴板');
            closePopup();
        });

        // 点击弹窗外部时关闭弹窗
        document.addEventListener('click', closePopupOnOutsideClick);

        // 添加二维码识别
        detectQRCode(imageUrl);
    }

    // 添加二维码识别函数
    function detectQRCode(imageUrl) {
        const img = new Image();
        img.crossOrigin = "Anonymous";
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const code = jsQR(imageData.data, imageData.width, imageData.height);

            const qrResult = document.getElementById('qrResult');
            const qrTextarea = document.getElementById('qrTextarea');
            const copyQrButton = document.getElementById('copyQrButton');
            if (code) {
                qrResult.textContent = "检测到二维码：";
                qrTextarea.value = code.data;
                qrTextarea.style.display = 'block';
                copyQrButton.style.display = 'block';
                autoResizeTextarea(qrTextarea);
            } else {
                qrResult.textContent = "未检测到二维码";
                qrTextarea.style.display = 'none';
                copyQrButton.style.display = 'none';
            }
        };
        img.onerror = function() {
            const qrResult = document.getElementById('qrResult');
            qrResult.textContent = "图片加载失败，无法识别二维码";
            document.getElementById('qrTextarea').style.display = 'none';
            document.getElementById('copyQrButton').style.display = 'none';
        };
        img.src = imageUrl;
    }

    // 自动调整textarea高度的函数
    function autoResizeTextarea(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    }

    // 关闭弹窗的函数
    function closePopup() {
        if (currentPopup) {
            document.body.removeChild(currentPopup);
            currentPopup = null;
            document.removeEventListener('click', closePopupOnOutsideClick);
        }
    }

    // 点击弹窗外部时关闭弹窗的函数
    function closePopupOnOutsideClick(event) {
        if (currentPopup && !currentPopup.contains(event.target)) {
            closePopup();
        }
    }
})();
欢迎访问Greasy Fork镜像
