浅入深出，原生API实现SVG 转 BASE64

令人发指的构建包

看了很多相关的技术文章，大多数用 html2canvas.js 和 canvas.js 第三方包实现，有些用了像 D3.js 这样更大型的构建包，而实际用到的功能，却只是其中 1% 都不足，简直就是令人发指。

综合文章中转换过程的设计思想，自己干，10行代码搞定！

设计思路

svg 先转 canvas 再转 base64

一：了解一下 canvas 转 Base64

 const canvas = document.getElementById('myCanvas');
 const ImgBase64 = canvas.toDataURL('image/png');
复制代码

data:image/png;base64,xxx... 【格式为 xxx.png】

二：了解一下 svg 转 .svg格式的 Base64 图片

  const svg = document.getElementById('mySvg');
  const s = new XMLSerializer().serializeToString(svg);
  const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
复制代码

data:image/svg+xml;base64,xxx... 【格式为 xxx.svg】

需求到这里就好了。但是还想把 svg 转成 png 的 base64 。

三：把【一】【二】糅合一下

把 svg 转成 .svg 格式的 base64
创建一个图片容器存放 ①
创建一个 canvas容器存放 ②
把 ③ 转成 .png 格式的 base64

     // ↓ 第一部分
     const svg = document.getElementById('mySvg');
     const s = new XMLSerializer().serializeToString(svg);
     const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
     // ↓ 创建图片容器并存放
     const img = new Image(); // 创建图片容器承载过渡
     img.src = src;
     // 注意：需要在图片onload方法中执行
     img.onload = () => {
       // ↓ 第二部分
       const canvas = document.createElement('canvas');
       canvas.width = img.width;
       canvas.height = img.height;
       const context = canvas.getContext('2d');
       context.drawImage(img, 0, 0);
       const ImgBase64 = canvas.toDataURL('image/png');
     }
复制代码

data:image/png;base64,xxx... 【格式为 xxx.png】

结语

很简单吧！原生 API 11行代码搞定！

你们说我要不要也去 node 上提交包呢！

哦~哈哈哈~

贴个完整版

<body>
  <div>
    <p>使用svg创建</p>
    <svg id="mySvg" width="200" height="200">
      <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0, 255, 255); stroke-width: 5;" />
      <line x1="0" y1="200" x2="200" y2="0" style="stroke:rgb(255, 0, 255); stroke-width: 5;" />
    </svg>
  </div>
  <p></p>
  <div>
    <p>使用canvas创建</p>
    <canvas id="myCanvas" width="200" height="200">你的浏览器不支持canvas！</canvas>
  </div>
  <p></p>
  <div>
    <button onClick="canvasBase64()">Canvas 转 Base64</button>
    <button onClick="svgBase64()">Svg 转 Base64</button>
    <button onClick="svgPng()">Svg 转 png</button>
  </div>
  <p></p>
  <div>
    <img id="myImg" src="xxx" />
    <p>右键保存看格式</p>
  </div>
  <script>
    {
      /** 注意顺序：1、创建；2、设置属性；3、渲染 **/
      let can = document.getElementById('myCanvas'); // 获取canvas容器
      let ctx = can.getContext('2d'); // 创建一个画布
      let canWid = can.width; // canvas 的宽度
      let canHei = can.height; // canvas 的高度

      ctx.beginPath(); // 开始一条路径
      ctx.rect(0, 0, 100, 100); // 创建矩形：rect(x, y, w, h)
      ctx.fillStyle = '#0000ff'; // 画布填充颜色
      ctx.fill(); // 实心

      ctx.beginPath(); // 开始一条路径
      ctx.rect(125, 25, 50, 50); // 创建矩形：rect(x, y, w, h)
      ctx.fillStyle = '#000000'; // 画布填充颜色
      ctx.fill(); // 实心

      ctx.beginPath(); // 开始一条路径
      ctx.arc(50, 150, 25, 0, 2 * Math.PI); // 创建圆：rect(x, y, 半径, 起始角, 结束角, 绘图顺序[可选, false顺, true逆])
      ctx.fillStyle = '#00ff00'; // 画布填充颜色
      ctx.fill(); // 实心

      ctx.beginPath() // 开始一条路径
      ctx.rect(100, 100, 100, 100); // 创建矩形：rect(x, y, w, h)
      ctx.fillStyle = '#ff0000'; // 画布填充颜色
      ctx.fill(); // 实心渲染
    }
    {
      const myImg = document.getElementById('myImg'); // 获取Img
      // #### Canvas 转 Base64
      function canvasBase64() {
        const canvas = document.getElementById('myCanvas');
        const ImgBase64 = canvas.toDataURL('image/png');
        console.log(ImgBase64, 'Canvas 转 Base64');
        myImg.src = ImgBase64;
      }
      // #### Svg 转 Base64
      function svgBase64() {
        const svg = document.getElementById('mySvg');
        const s = new XMLSerializer().serializeToString(svg);
        const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
        console.log(ImgBase64, 'Svg 转 Base64');
        myImg.src = ImgBase64;
      }
      // #### Svg 转 png
      function svgPng() {
        const svg = document.getElementById('mySvg');
        const s = new XMLSerializer().serializeToString(svg);
        const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
        const img = new Image(); // 创建图片容器承载过渡
        img.src = src;
        img.onload = () => {
          // 图片创建后再执行，转Base64过程
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const context = canvas.getContext('2d');
          context.drawImage(img, 0, 0);
          const ImgBase64 = canvas.toDataURL('image/png');
          console.log(ImgBase64, 'Svg 转 png');
          myImg.src = ImgBase64;
        }
      }
    }
  </script>
</body>
复制代码