HTML5中svg转化为图片详解及所需方法
HTML5中提供了将svg转化为图片的方法,需要借助html2canvas和canvg两个库来实现。具体方法如下:首先,在html文件中引入这两个库的js文件。然后,在script标签中使用如下代码实现将svg转化为图片:
var svg = document.querySelector('svg');
var canvas = document.createElement('canvas');
var width = svg.getAttribute('width');
var height = svg.getAttribute('height');
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
//调用canvg将svg转化为canvas
canvg(canvas, svg.outerHTML);
//调用html2canvas将canvas转化为图片
html2canvas(canvas).then(function (canvas) {
document.body.appendChild(canvas);
});
这里的svg是指需要转化为图片的图形的标签,width和height是其宽高,可以在标签中直接指定。canvg是将svg转化为canvas的方法,需要传入需要转化的svg和canvas对象。html2canvas则是将canvas转化为图片的方法,需要传入canvas对象,并返回Promise对象,最终将图片附加到html的body中。