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

最新推荐文章于 2025-07-14 19:36:48 发布

竹子js

最新推荐文章于 2025-07-14 19:36:48 发布

阅读量8.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js插件文章标签： domtoimage 截图保存并下载 dom转图片下载

本文链接：https://blog.youkuaiyun.com/bamboozjy/article/details/97951541

js插件专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个名为DOMtoImage的插件，它能够有效地将网页内容转换为图片，解决了之前使用html2canvas遇到的各种问题，如canvas污染、图片下载失败和跨域等问题。只需引入JS文件并调用API，即可生成高质量的图片，适用于前端开发中对网页截图的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

插件地址:传送门

详情