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

渲染慢的原因

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

提升html2canvas渲染速度

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

1. compareDocumentPositon方法用来判断当前节点是否我们目标节点的祖先节点。
2. 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格式