返回首頁 

下载选中的 Canvas 图片

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


Install this script?
// ==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);})();