令人发指的构建包
看了很多相关的技术文章, 大多数用 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
创建一个 图片容器 存放 1
创建一个 canvas 容器 存放 2
把 3 转成 .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>
来源: https://juejin.im/post/5c94558c6fb9a070d14c2fc8