SVG转图片 遇到的坑

开发过程中遇到一个 需求 将svg画的图谱保存成图片 ，查了很多资料，将解决办法和遇到的问题mark一下

保存图片的方法

1let that = this;
2let chart = document.getElementById('chart');
3let svghtml = chart.innerHTML;
4
5// let svg = document.querySelector('svg');
6// let svghtml = svg.outerHTML;
7// let svghtml = new XMLSerializer().serializeToString(svg);
8let img = new Image();
9
10let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`;//
11// let imgsrc = `data:image/svg+xml;utf,${svghtml}`;//
12img.onload = function () {
13　　let canvas = document.createElement('canvas');
14　　canvas.width = chart.offsetWidth;
15　　canvas.height = chart.offsetHeight;
16　　let context = canvas.getContext('2d');
17　　context.drawImage(img, 0, 0);
18　　let url = canvas.toDataURL('image/png');
19　　let a = document.createElement('a');
20　　// a.href = './assets/imgs/company.png';
21　　a.href = url;
22　　a.download = that.corpname + '融资图谱.png';
23　　a.click();
24}
25
26注意点：svg转base64地址的方法有下面两种
27
281
29   let chart = document.getElementById('chart');   
30　　let svghtml = chart.innerHTML;
31　　let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`;
32
332　 let svg = document.querySelector('svg');
34　  let svghtml = svg.outerHTML;
35　　let svghtml = new XMLSerializer().serializeToString(svg);

遇到的第一个坑：

1当你使用第一种转base64方法的时候 
2svg标签要 加上xmlns http://www.w3.org/2000/svg的属性 要不然image会一直进error的方法
3如果svg中 包含了image 则也需要加上 属性 xmlns http://www.we.org/1999/xlink 　

遇到的第二个坑：

1 但是如果你的svg中包含了image 标签 ，千万要注意 里面的src最好写上 
2 要引用的图片的base64 地址，否则如果直接引用项目图片地址的话，最后下载的图片 原来svg中的image不会出现在图片中
3
4附上image转base64的方法
5_img2base64 = (img) => {
6    var canvas = document.createElement("canvas");
7    canvas.width = img.width;
8    canvas.height = img.height;
9    var ctx = canvas.getContext("2d");
10    ctx.drawImage(img, 0, 0, img.width, img.height);
11    var dataURL = canvas.toDataURL("image/png");
12    return dataURL;
13}

遇到的坑3：

1一定是在img onload方法中 进行base64转化，
2// let img = new Image();
3      // img.src = './assets/imgs/company.png';
4      // img.onload = function () {
5      //   img.width = 80;
6      //   img.height = 80;
7      //   document.body.appendChild(img)
8      //   let url1 = that._img2base64(img);
9　　　　//  将获取的base64复制给svg的image属性 
10   // }

　ok 完事，希望能解决你的困惑

有问题 评论见