标签：XML 很多 正确姿势 esc ntb src err har nes
开发过程中遇到一个 需求 将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();
1
let chart = document.getElementById(‘chart‘);
let svghtml = chart.innerHTML;
let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`;//
但是注意 svg标签要 加上xmlns http://www.w3.org/2000/svg的属性 要不然image会一直进error的方法
如果svg中 包含了image 则也需要加上 属性 xmlns http://www.we.org/1999/xlink
2
// let svg = document.querySelector(‘svg‘); // let svghtml = svg.outerHTML; // let svghtml = new XMLSerializer().serializeToString(svg);
3 但是如果你的svg中包含了image 标签 千万要注意 里面的src最好写上 要引用的图片的base64 地址，否则如果直接引用项目图片地址的话，最后下载的图片 原来svg中的image不会出现在图片中
4 附上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;
}
5 获取base64正确姿势，一定是在img onload方法中获取，是异步获取
// 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 完事，希望能解决你的困惑
有问题 评论见
标签：XML 很多 正确姿势 esc ntb src err har nes
原文地址：https://www.cnblogs.com/lisiyang/p/11583563.html
