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也会保留



 

热门相关:恭喜你被逮捕了   花月颂   锦乡里   变身蜘蛛侠   万古至尊