js将dom转成图片并下载(亲测有效) domtoimage替换html2canvas

之前使用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')

 

插件地址:传送门

 

 

详情