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

你的名字 2022-01-19 23:03 2275阅读 0赞

#### 令人发指的构建包 ####

看了很多相关的技术文章，大多数用 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 。

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

1.  把 svg 转成 .svg 格式的 base64
2.  创建一个 图片容器 存放 ①
3.  创建一个 canvas容器 存放 ②
4.  把 ③ 转成 .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>
    复制代码