可以使用html2canvas,但由于折线、圆、多边形等是使用svg形成的,html2canvas无法识别svg,所以需要先将svg转成canvas。
使用canvg无法将百度地图中的svg转成canvas,会出现一片空白。实际测试时发现删除svg标签上的属性就可以转化成功,但样式会错乱。
可以使用rasterizehtml来进行转化。
import rasterizeHTML from 'rasterizehtml';
//获取全部的svg
var svgElems =$('#report').find('svg');//report为需要截取成图片的dom的id
svgElems.map(function(index,item){
//获取svg的父元素
let parentNode = item.parentNode;
//获取svg内容及样式
let svgHTML = (item.outerHTML || new XMLSerializer().serializeToString(item)).trim();
let svgStyles = getComputedStyle(item);
//创建canvas元素,并根据svg设置宽
let canvas = document.createElement('canvas');
canvas.width = parseInt(svgStyles.width, 10);
canvas.height = parseInt(svgStyles.height, 10);
//生成canvas
rasterizeHTML.drawHTML(svgHTML,canvas);
//使用canvas代替svg
parentNode.removeChild(item);
parentNode.appendChild(canvas)
})
//使用html2canvas截取地图成canvas
html2canvas(document.getElementById('echartsMapPage3'),{
useCORS:true,
allowTaint :true
}).then(function(canvas) {
document.body.appendChild(canvas);
});