☰

下载选中的 Canvas 图片

鼠标移动到canvas元素上并按下Ctrl+shift+c来选中，将其转换为 PNG 格式图片文件并自动下载到本地。

// ==UserScript==
// @name         下载选中的 Canvas 图片
// @namespace    http://tampermonkey
// @version      1.1
// @description  鼠标移动到canvas元素上并按下Ctrl+shift+c来选中，将其转换为 PNG 格式图片文件并自动下载到本地。
// @match        *://*.17font.com/*
// ==/UserScript==

(function() {
    'use strict';

    let selectedCanvas;

    // 处理鼠标移动事件
    const handleMouseMove = (e) => {
        // 获取鼠标所指向的元素
        const element = document.elementFromPoint(e.clientX, e.clientY);

        // 如果鼠标所指向的元素是一个 canvas 元素，则将其保存为 selectedCanvas 变量
        if (element.tagName && element.tagName.toUpperCase() === "CANVAS") {
            selectedCanvas = element;
        }
        else {
            selectedCanvas = null;
        }
    };

    // 处理快捷键事件
    const handleKeyDown = (e) => {
        // 如果按下 ctrl + shift + C 快捷键，并且 selectedCanvas 不为空
        if (e.ctrlKey && e.shiftKey && e.keyCode === 67 && selectedCanvas) {
            // 创建空画布
            const canvas = document.createElement("canvas");
            canvas.width = selectedCanvas.width;
            canvas.height = selectedCanvas.height;

            // selectedCanvas 内容绘制到空画布上
            const context = canvas.getContext("2d");
            context.drawImage(selectedCanvas, 0, 0);

            // 将画布内容转为图片并下载
            canvas.toBlob((blob) => {
                const url = URL.createObjectURL(blob);
                const a = document.createElement("a");
                document.body.appendChild(a);
                a.style.display = "none";
                a.href = url;
                a.download = "canvas_image.png";
                a.click();
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);

                // 提示用户下载成功
                // GM_notification("下载成功", "Canvas downloader");
            });

            // 阻止默认事件
            e.preventDefault();
            e.stopPropagation();
        }
    };

    // 将鼠标移动事件和快捷键事件绑定到 window 对象上
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("keydown", handleKeyDown);

})();