html2canvas实现指定文档元素截图

html2canvas使用时，有一种场景，我们截图的时候有些元素我们不需要保留，所以文档中就提到了一个属性。

html2canvas文档

https://www.pianshen.com/article/641826799/

文档上写清楚了 ignoreElements可以遍历元素删除匹配的元素，接下来就讲一下两种使用方式。

使用方式一

<div class="btn">点击截图</div>
    <div id="targetDom" class="main">
        <div id="capture" style="padding: 10px; background: #f5da55">
        	<h4 style="color: #000; " data-html2canvas-ignore>Hello world!</h4>
        <img src="public/avatar/myavatar.jpg" alt="" srcset="">
    </div>
</div>

以上的例子我们使用到了 data-html2canvas-ignore在不需要保留的元素标签直接绑定属性的方法，这种场景适合比较简单的场景。

使用方式二

<div class="btn">点击截图</div>
    <div id="targetDom" class="main">
        <div id="capture" style="padding: 10px; background: #f5da55">
        	<h4 style="color: #000; ">Hello world!</h4>
        <img src="public/avatar/myavatar.jpg" id='images' alt="" srcset="">
    </div>
</div>

$(".btn").on("click", function () {
    html2canvas(document.querySelector("#capture"),{
    	 useCORS:true,
            allowTaint:true,
            ignoreElements:(element)=>{
            if(element.id==='images') //匹配id为images的元素 
            return true; //返回true为截图时 删除该元素
	}
    ).then(canvas => {
        document.body.appendChild(canvas)
    });
})

以上就是我们的第二种方式，直接通过遍历所有元素的方法去匹配我们需要删除的元素，这种方式比较灵活，可以处理一些带一些逻辑的业务场景。

希望能帮助到大家！

喜欢下方小程序的私信送源码

>