js实现svg图形转存为图片

First Post:

Last Update:

js实现svg图形转存为图片

1
2
3
<div class="svg-wrap">
  <svg>...</svg>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

// $('body').append(image);

var canvas = document.createElement('canvas'); //准备空画布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();

var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);

$('body').append(canvas);

// var a = document.createElement('a');
// a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
// a.download = "MapByMathArtSys"; //设定下载名称
// a.click(); //点击触发下载

原文链接：https://www.cnblogs.com/mmzuo-798/p/7090646.html

≡