vue使用html2canvas优化---节点过滤
当你使用html2canvas对某个节点进行截图时，项目小dom节点少那还没什么性能问题，如果是个大项目，有成百上千个dom节点，那将是非常头疼的事情（产品经理：小张啊，你这个截图功能为什么需要这个长的时间，这让客户怎么用，重新改。小张：********...）。不多bb了，直接开始
html2canvas的配置项提供了一个回调函数 ignoreElements， 他的作用就是过滤节点的， html2canvas 他会对你的dom树进行循环，每次循环都会调用一次 ignoreElements，ignoreElements接收一个参数就是当前循环到的dom , 当你返回true就不会循环这个节点的子节点了，意思就是过滤了当前节点，反之则保留当前节点继续向下循环。
代码：
1 function getImages(element){ 2 const canvas = await html2canvas(element, { 3 allowTaint: false, 4 // 因为`allowTaint`表示是否允许被污染,而被污染的canvas是没法使用`toDataURL()`转`base64`流的,但是我们这需要`base64`,所有`allowTaint`需要被设置为`false` 5 useCORS: true, // 允许跨域 6 tainttest: true, // 检测每张图片都已经加载完成 7 logging: true, 8 ignoreElements:(e)=>{ 9 if(e.contains(element) || element.contains(e) || e.getAttribute('data-html2canvas') != null){ 10 return false 11 } 12 return true 13 }, 14 backgroundColor: `rgb(255,255,255)`, // 转换图片可能会有白色底色，你可根据你的页面或者PM要求设置一下背景色，不要的话就null 15 }) 16 17 let imgUrl = canvas.toDataURL("image/jpeg"); 18 if(imgUrl == 'data:,') return '' 19 console.log(imgUrl); 20 return imgUrl 21 }
element 指的是截取的目标节点
重点在第9行，
e.contains(element) || element.contains(e) 的意思是当前循环的节点是目标节点的父级或子急级，直接一步到位， 速度直接提升80%，可以直接拿去甩到产品经理的脸上，他还会夸你nb。嗯，爽不爽！！！
e.getAttribute('data-html2canvas') != null 这个就是在节点上加了一个 data-html2canvas 属性，若第3行和第7行
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head data-html2canvas> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial- 7 <link data-html2canvas rel="stylesheet" href="css.css" > 8 </head> 9 <body> 10 <noscript> 11 <strong>We're sorry but api-gateway-admin-front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 12 </noscript> 13 <div id="app"></div> 14 </body> 15 </html>
过滤的时这个css也会保留