svg标签转图片jpg/png下载

---

前言

UI需要导出网页上的一个svg标签

查了一下没有很具体的完整代码，大致思路是挺多的，所以这边写了一个本地的网页，并且增加了一些配置项用于导出不同分辨率和格式的图片

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现原理

利用svg标签和canvas的关联，将svg的二进制内容使用btoa函数（window的方法）转化为base64，然后拼接上前缀放到新建的image标签中，使用canvas导入图片并生成下载链接（本地临时链接），然后通过a标签的点击进行下载。

二、关键代码和全文代码

1.关键代码如下

代码如下：

 function downloadPNG() {
   
 				//获取输入框的配置项
                let svg = document.getElementById("textarea").value;
                const width = document.getElementById("width").value;
                const height = document.getElementById("height").value;
                const name = document.getElementById("name").value;
                const type = document.getElementById("type").value;
                const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");
                if (!alerts(width, height, name, type, svg)) return;
                // 修改svg标签内的width和height
                const modifiedSVG = svg.replace(
                    /width="(.*?)"/,
                    `width="${
     width}"`
                );
                const finalSVG = modifiedSVG.replace(
                    /height="(.*?)"/,
                    `height="${
     height}"`
                );
                console.log(finalSVG);
				//开始制作图片和canvas并下载
                try {
   
                    const img = new Image();
                    img.src = `data:image/svg+xml;base64,${
     btoa(finalSVG)}`;
                    img.onload = function () {
   
                        canvas.width = img.width;
                        canvas.height