开发过程中遇到一个 需求 将svg画的图谱保存成图片 ，查了很多资料，将解决办法和遇到的问题mark一下
保存图片的方法
let that = this; let chart = document.getElementById('chart'); let svghtml = chart.innerHTML; // let svg = document.querySelector('svg'); // let svghtml = svg.outerHTML; // let svghtml = new XMLSerializer().serializeToString(svg); let img = new Image(); let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`;// // let imgsrc = `data:image/svg+xml;utf,${svghtml}`;// img.onload = function () { let canvas = document.createElement('canvas'); canvas.width = chart.offsetWidth; canvas.height = chart.offsetHeight; let context = canvas.getContext('2d'); context.drawImage(img, 0, 0); let url = canvas.toDataURL('image/png'); let a = document.createElement('a'); // a.href = './assets/imgs/company.png'; a.href = url; a.download = that.corpname + '融资图谱.png'; a.click(); } 注意点：svg转base64地址的方法有下面两种 1 let chart = document.getElementById('chart'); let svghtml = chart.innerHTML; let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`; 2 let svg = document.querySelector('svg'); let svghtml = svg.outerHTML; let svghtml = new XMLSerializer().serializeToString(svg);遇到的第一个坑：
当你使用第一种转base64方法的时候 svg标签要 加上xmlns http://www.w3.org/2000/svg的属性 要不然image会一直进error的方法 如果svg中 包含了image 则也需要加上 属性 xmlns http://www.we.org/1999/xlink遇到的第二个坑：
但是如果你的svg中包含了image 标签 ，千万要注意 里面的src最好写上 要引用的图片的base64 地址，否则如果直接引用项目图片地址的话，最后下载的图片 原来svg中的image不会出现在图片中附上image转base64的方法 _img2base64 = (img) => { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL("image/png"); return dataURL; }
遇到的坑3：
一定是在img onload方法中 进行base64转化， // let img = new Image(); // img.src = './assets/imgs/company.png'; // img.onload = function () { // img.width = 80; // img.height = 80; // document.body.appendChild(img) // let url1 = that._img2base64(img); // 将获取的base64复制给svg的image属性 // }
ok 完事，希望能解决你的困惑
有问题 评论见
转载于:https://www.cnblogs.com/lisiyang/p/11583563.html
