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

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

---

---

©xgqfrms 2012-2025

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---