html2canvas的ignoreElements的使用方法

我的处女作《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“下所有的元素都打印了一遍。

完美解决!

 

  • 11
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值