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 = `
// <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" viewBox="0 0 100 100" width="100" height="100">
// <text x="25" y="50" fill="#00ff00">${userName}</text>
// </svg>
// `;
const watermark = `
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg"
width="232"
height="232"
style="transform: rotate(-15deg);
transform-origin: 50% 50%;">
<text
xmlns="http://www.w3.org/2000/svg"
x="50%" y="50%"
text-anchor="middle"
alignment-baseline="middle"
fill="rgba(0, 0, 0, 0.05)"
font-weight="normal"
style="font-size: 14px;"
font-family="'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif">
${userName}
</text>
</svg>
`;
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
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15849404.html
未经授权禁止转载,违者必究!