Canvas2PNG

将Canvas下载为PNG图片
当前为 2025-03-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Canvas2PNG
// @namespace    https://tampermonkey.net/
// @version      0.1.0
// @description  将Canvas下载为PNG图片
// @author       FakerJMS
// @match        https://*.designkit.com/*
// @icon         https://www.bing.com/sa/simg/favicon-trans-bg-blue-mg.ico
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    
    // 获取时间戳: YYYYMMDD_HHMMSS
    function fk_get_timestamp() {
        let now = new Date();
        let year = now.getFullYear();
        let month = String(now.getMonth() + 1).padStart(2, '0');
        let day = String(now.getDate()).padStart(2, '0');
        let hours = String(now.getHours()).padStart(2, '0');
        let minutes = String(now.getMinutes()).padStart(2, '0');
        let seconds = String(now.getSeconds()).padStart(2, '0');
        return `${year}${month}${day}_${hours}${minutes}${seconds}`;
    }
    
    // 下载Canvas为PNG图片
    function fk_download_canvas() {
        // 获取待下载canvas
        let canvas = document.querySelector('.fk_c2p_canvas');
        if (!canvas) {
            alert('请先给待下载canvas添加类名 `fk_c2p_canvas` ...');
            return;
        }
        
        // 生成文件名
        let timestamp = fk_get_timestamp();
        let filename = `fk_${timestamp}.png`;
        
        // 下载canvas为PNG图片
        let data_url = canvas.toDataURL('image/png');
        let link = document.createElement('a');
        link.href = data_url;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
    // 添加下载按钮
    //
    let fk_button = document.createElement('button');
    fk_button.style.position = 'fixed';
    fk_button.style.left = '10px';
    fk_button.style.top = '50%';
    fk_button.style.transform = 'translateY(-50%)';
    fk_button.style.zIndex = '9999';
    fk_button.textContent = '下载Canvas';
    //
    fk_button.addEventListener('click', function() {
        fk_download_canvas();
    });
    //
    document.body.appendChild(fk_button);
})();
欢迎访问Greasy Fork镜像
