canvas 转换成 svg

把网页中的 canvas 转换成 svg

目前為 2020-11-26 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         canvas 转换成 svg
// @namespace    https://gist.github.com/liubiantao
// @version      0.1
// @description  把网页中的 canvas 转换成 svg
// @author       You
// @match        https://www.amap.com/
// @grant        GM_addStyle
// @require      https://cdn.jsdelivr.net/npm/[email protected]/canvas2svg.min.js
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
    #canvas2svg {
        position: fixed;
        bottom: 20%;
        left: 1px;
        border: 1px solid #00b5ff;
        padding: 3px;
        font-size: 12px;
        cursor: pointer;
        border-radius: 3px;
        z-index: 111;
        color: #00b5ff;
        background: #00b5ff1f;
    }
  `)

    function canvas2svg(){
        const gl = document.querySelector('canvas').getContext('webgl')
        var ctx = new C2S(500,500);
        ctx.drawImage(gl.canvas, 0, 0);
        var myRectangle = ctx.getSerializedSvg(true);
        console.log(myRectangle)

    }

    function addButton() {
        const btn = document.createElement('div')
        btn.innerText = 'canvas2svg'
        btn.id = 'canvas2svg'
        document.body.append(btn)
        document.querySelector('#canvas2svg').addEventListener('click', canvas2svg)
    }


    addButton()

})();