svg 保存为png (解决放大缩小保存图片不完整问题)

1,039 阅读1分钟
  1. 把svg作为dataurl放在image
  2. 创建一个canvas来显示image
  3. 利用canvas.toDataURL存为图片
  4. 创建a标签出发浏览器下载 以下就是代码,还请大神好好指点

不做兼容ie处理,什么版本也不兼容,反正是心塞了。已经折磨好久了,放弃了!!

var serializer = new XMLSerializer();
var svg1 = document.getElementsByTagName('svg')[1];
var toExport = svg1.cloneNode(true);
var bb = svg1.getBBox();
toExport.setAttribute('viewBox', bb.x + ' ' + bb.y + ' ' + bb.width + ' ' + bb.height);
toExport.setAttribute('width', bb.width + 40);
toExport.setAttribute('height', bb.height + 40);
var source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(toExport);
var image = new Image();
image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
var canvas = document.createElement("canvas");
canvas.width = bb.width + 40;
canvas.height = bb.height + 40;
var context = canvas.getContext("2d");
context.fillStyle = '#fff';// #fff设置保存后的PNG 是白色的
context.fillRect(0, 0, 10000, 10000);
image.onload = () => {
   context.drawImage(image, 0, 0);
   var a = document.createElement("a");
   a.download = `test.png`;
   a.href = canvas.toDataURL("image/png");
   a.click();
}