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

时间 2019-11-08

标签原生 api 实现 svg base64 base 繁體版

原文原文链接

使人发指的构建包

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

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

设计思路

svg 先转 canvas 再转 base64java

一：了解一下 canvas 转 Base64

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

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

二：了解一下 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】canvas

需求到这里就行了。可是还想把 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】svg

结语

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

大家说我要不要也去 node 上提交包呢！spa

哦~哈哈哈~设计

贴个完整版

<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> { /** 注意顺序：一、建立；二、设置属性；三、渲染 **/ 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>
复制代码