html2canvas的ignoreElements的使用方法
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudy在用hrml2canvas时,官方文档针对于ignoreElement属性给出了以下说法:其中中间列表示默认值。突然箭头...
·
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
在用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“下所有的元素都打印了一遍。
完美解决!
更多推荐
已为社区贡献9条内容
所有评论(0)