html2canvas的ignoreElements的使用方法

最新推荐文章于 2025-07-11 16:09:48 发布

原创最新推荐文章于 2025-07-11 16:09:48 发布 · 1.1w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#html2canvas #ignoreElements #canvas #前端 #隐藏指定canvas

前端体系专栏收录该内容

32 篇文章

订阅专栏

本文详细解析了html2canvas库中ignoreElements属性的使用方法，通过具体示例展示了如何利用该属性忽略指定DOM元素，实现精确的canvas转换。

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

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

在用hrml2canvas时，官方文档针对于ignoreElement属性给出了以下说法：

其中中间列表示默认值。

突然箭头函数的表示默认值瞬间一脸懵，无奈之下查找国内外文献甚至包括github上issue区，竟然没找到一个例子，几经尝试下，终于搞懂了这个的用法。

话不多说，上代码！开心！！！！！搞定了！！

解释：我是将节点“print”包含的组件用html2canvas转化canvas，其中将节点“printHide”元素隐藏掉，当遍历到id=’printHide‘时返回true即可

        html2canvas(document.getElementById('print'),{
            scale:2,
            logging:false,
            useCORS:true,
            allowTaint:true,
            ignoreElements:(element)=>{
            if(element.id==='printHide')
            return true;
        },

        }).then(function(canvas) {
            document.body.appendChild(canvas);
        });

默认值是false，那隐藏就是true喽

详解：

实际上，ignoreElement函数会依次遍历每一个经过的节点“print”下的元素，将代码稍作更改即可

        html2canvas(document.getElementById('print'),{
            scale:2,
            logging:false,
            useCORS:true,
            allowTaint:true,
            ignoreElements:(element)=>{
            /*遍历每个节点*/
            if(element.id==='printHide')
            console.log(element);
            return false;
        },

        }).then(function(canvas) {
            document.body.appendChild(canvas);
        });

此时可看到控制台上把节点”print“下所有的元素都打印了一遍。

完美解决！