js convert canvas image to SVG image All In One

js convert canvas image to SVG image All In One

canvas 2 svg

svg 2 canvas

demo

https://gliffy.github.io/canvas2svg/



// const userName = "xgqfrms";
const userName = "凌晨 007";

// const watermark = `
//     
//         ${userName}
//     
// `;

const watermark = `
    
        
             ${userName}
        
    
`;


const app = document.querySelector(`#app`);
app.insertAdjacentHTML('beforeend', watermark);

const svgElement = document.querySelector(`#svg`);

const svgURL = new XMLSerializer().serializeToString(svgElement);
const imgSrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgURL)))}`;


console.log(`imgSrc =`, imgSrc);

svg+xml;base64;

data:image/svg+xml;base64


data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaWQ9InN2ZyIgd2lkdGg9IjIzMiIgaGVpZ2h0PSIyMzIiIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgtMTVkZWcpOyYjMTA7ICAgICAgdHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTsiPgogICAgICAgIDx0ZXh0IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iNTAlIiB5PSI1MCUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuMDUpIiBmb250LXdlaWdodD0ibm9ybWFsIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyIgZm9udC1mYW1pbHk9IidQaW5nRmFuZyBTQycsICdNaWNyb3NvZnQgWWFIZWknLCAnSGVsdmV0aWNhIE5ldWUnLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIj4KICAgICAgICAgICAgIOWHjOaZqCAwMDcKICAgICAgICA8L3RleHQ+CiAgICA8L3N2Zz4=

MutationObserver API

监听禁用用户修改 DOM

禁用用户打开 Chrome devtools

refs

https://github.com/gliffy/canvas2svg

https://stackoverflow.com/questions/59248058/canvas-todataurlimage-svgxml-returning-dataimage-pngbase64/70863414#70863414

Flag Counter

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！

canvasimagejssvgMutationObserver

相关

在虚拟机(centos)上安装或卸载nodejs

js 正则匹配 两个字符串之间，某个字符串之前（之后）的内容

sql server2016里面的json功能 - 转

cefSharp通过js操控页面，含跨域操控

angularjs $emit $on $broadcast 父子 兄弟之间传值

渡一 3-2 js基础知识

canvas 基础教程

js 校验身份证号码

nodejs 一个简单的web服务器，用于前端自己快速测试部署

11-15.JS轮播、专辑、放大镜

JS值传递与引用传递

[转]Vue-cli3.x引入本地json报404 解决方案

标签