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')

 

插件地址:傳送門

 

 

詳情