html2canvas网页元素转图片，并提升渲染速度

LL就是我

已于 2023-12-04 15:29:28 修改

阅读量2.5k

点赞数 8

文章标签：前端 javascript html

于 2023-12-04 12:01:00 首次发布

本文链接：https://blog.youkuaiyun.com/LL19880915/article/details/134780009

版权

文章讲述了如何通过html2canvas库提高页面渲染效率，重点介绍了使用ignoreElements和compareDocumentPosition方法筛选需要渲染的DOM节点，以及保留必要元素如HEAD、LINK和STYLE以保持样式效果。

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

渲染慢的原因

如果页面复杂，html2canvas渲染过慢是因为遍历了所有节点，导致渲染过程变慢,所以我们需要挑出我们需要的dom节点来进行渲染。

提升html2canvas渲染速度

这里我们要通过html2canvas里的ignoreElements和DOM对象的compareDocumentPositon方法特殊处理下。

compareDocumentPositon方法用来判断当前节点是否我们目标节点的祖先节点。
ignoreElements方法用来决定是否忽略此节点。

<div id='html2canvasDom'>
	<div name='child'></div>
	<div name='child'></div>
	<div name='child'></div>
</div>

import html2canvas from 'html2canvas'

let tags = ['HEAD','LINK','STYLE'] // 必须保留的节点，保持样式效果等
let dom = documents.getElementById('html2canvasDom') //目标节点
//获取我们需要的canvas
let canvas = html2canvas(dom,{
	backgroundColor:'transparent',//透明效果
	ignoreElements:(element)=>{
		if(
		//比较两个节点，值 20 表示当前处理的节点是目标节点的祖先节点，不能忽略
		element.compareDocumentPositon(dom)==20||
		//如果目标节点内还有子节点，就需要把后续的子节点也不能忽略掉，我们给个统一的属性
		element.getAttribute('name')=='child'||
		//必须保留的节点，保持样式效果
		tags.indexOf(element.tagName)!=-1)){
			//不忽略
			return false
		}else{
			//其他的都忽略
			return true
		}
	}
})

let imgData = canvas.toDataURl('image/png');//转换为DataURL格式