识别网页上的二维码

悬浮在图片上时，右键菜单里给出识别二维码的选项。
当前为 2024-01-10 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         识别网页上的二维码
// @namespace    http://tampermonkey.net/
// @version      0.2.1
// @description  悬浮在图片上时，右键菜单里给出识别二维码的选项。
// @author       aspen138
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_notification
// @require      https://unpkg.com/jsqr/dist/jsQR.js
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let selectedImage = null;

    // 添加右键菜单选项
    document.addEventListener('contextmenu', function(event) {
        // 确定是否是图片元素
        if (event.target.tagName === 'IMG') {
            selectedImage = event.target; // 保存当前选中的图片
        } else {
            selectedImage = null;
        }
    }, false);

    // 注册菜单命令
    GM_registerMenuCommand("识别二维码", function() {
        console.log("selectedImage=", selectedImage);
        if (selectedImage) {
            decodeQRCode(selectedImage);
        }
    }, 'r');

    function decodeQRCode(image) {
        // 创建Canvas来读取图片内容
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = image.naturalWidth; // 使用图片的原始尺寸
        canvas.height = image.naturalHeight;
        context.drawImage(image, 0, 0, canvas.width, canvas.height);
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

        // 使用jsQR库识别二维码
        const code = jsQR(imageData.data, imageData.width, imageData.height);

        // 如果识别出二维码，发送通知显示结果
        if (code) {
            alert(`二维码内容：${code.data}`+ '     二维码识别结果');  //别用GM_notification了吧
        } else {
            alert('未识别到二维码，请确保图片中包含一个可识别的二维码。' + '   二维码识别错误');  //别用GM_notification了吧
        }
    }
})();