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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556735.html

標籤：JavaScript

上一篇：在線加密JS代碼的方法

下一篇：返回列表