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中。