之前使用html2canvas转成图片会有各种bug,如canvas被污染,导致不能下载,图片跨域等.最终还是没能解决问题.
最近找到一个新的插件domtoimage,可以完美解决之前的问题,这个只需要引入js,然后调用即可生成图片.
domtoimage.toPng(document.getElementById('repair'))
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
var a=document.createElement('a')
a.setAttribute('href',dataUrl)
a.setAttribute('download',"1.png")
a.click()
})
.catch(function (error) {
console.error('转图片失败!', error);
});
注意:
要转成图片的dom必须是可见的,display:none;或者opacity:0;都会导致生成图片不成功!
一定要通过原生方式获取到dom元素:document.getElementById('repair')
插件地址:传送门