html2canvas-實現頁面截圖
阿新 • • 發佈：2018-10-31
如何將HTML頁面儲存為圖片？
- 將DOM改寫為canvas，然後利用canvas的toDataURL方法實現將DOM輸出為包含圖片展示的data url。
- 使用HtmlCanvas2實現。
- 使用rasterizeHTML.js實現。
優缺點分析：
(1)、利用DOM改寫為canvas的方式：相當於完全重寫了整個頁面的佈局樣式，增加了工作量。 由於canvas中沒有的物件概念，對於元素豐富、佈局複雜的頁面，不易重構。 所有DOM元素改寫進canvas會帶來一些困難。例如：難以支援響應式。
(2)、利用HtmlCanvas的方式：只需簡單呼叫html2canvas方法並設定配置項即可。指令碼使用的所有影象需要駐留在同一個源下，如果頁面上有其他畫布元素，這些元素已經被跨源內容汙染，不再能被html2canvas讀取。
(3)、使用rasterizeHTML.js實現：限制較多，目前僅支援3類可轉為canvas的目標格式: 頁面url，html字串和document物件。
html2canvas指令碼截圖原理
指令碼允許你直接在使用者瀏覽器上獲取網頁的截圖或部分內容。螢幕截圖是基於DOM的，因此對於真實的表示來說，它可能不是100%準確的，因為它不做實際的螢幕截圖，而是基於頁面上可用的資訊構建螢幕截圖。它實際上並不獲取頁面的螢幕截圖，而是基於從DOM讀取的屬性構建頁面的表示。因此，它只能正確地描述它所理解的屬性，這意味著有許多CSS屬性不起作用。
怎樣安裝使用html2canvas？
安裝 npm install html2canvas
引入 import html2canvas from ‘html2canvas’;
（1）html2canvas引數
| 名稱 | 預設 | 描述 |
|---|---|---|
| async | true | 是否非同步解析和呈現元素 |
| allowTaint | false | 是否允許跨原始影象汙染畫布 |
| backgroundColor | #ffffff | 畫布背景顏色，如果在DOM中未指定，設定 null 為透明 |
| canvas | null | 現有畫布元素用作繪圖的基礎 |
| foreignObjectRendering | false | 是否在瀏覽器支援的情況下使用ForeignObject渲染持 |
| imageTimeout | 15000 | 載入影象的超時（以毫秒為單位，設定 0 為禁用超時 |
| ignoreElements | (element)=>false | 謂詞函式，用於從渲染中刪除匹配元素 |
| logging | true | 啟用日誌記錄以進行除錯 |
| onclone | 在克隆文件進行渲染時呼叫的回撥函式可用於修改將在不影響原始源文件的情況下呈現的內容。 | |
| proxy | null | Url到 代理 ，用於載入跨源影象。如果留空，則不會載入跨原始影象。 |
| removeContainer | true | 是否要清理克隆的DOM元素html2canvas會暫時建立 |
| scale | window.devicePixelRatio | 用於渲染的比例，預設為瀏覽器裝置畫素比率 |
| useCORS | false | 用來設定是否允許使用跨域的圖片進行訪問 |
| width | element width | canvas的寬度 |
| height | element height | canvas高度設定 |
| x | element x-offset | 裁剪畫布x座標 |
| y | element y-offset | 裁剪畫布y座標 |
| scrollX | element scrollX | 渲染元素時使用的x滾動位置（例如，如果Element使用 position: fixed ） |
| scrollY | element scrollY | 渲染元素時使用的y滾動位置（例如，如果Element使用 position: fixed ） |
| windowWidth | Window.innerWidth | 渲染元素時使用的視窗寬度，這可能會影響媒體查詢之類的東西 |
| windowHeight | Window.innerHeght | 染時使用的視窗高度 Element ，這可能會影響媒體查詢等內容 |
| taintTest | true | 在渲染前測試圖片 |
（2）html2canvas的使用方法
- 第一步：實現儲存為圖片的第一步：html轉為canvas
基於html2canvas.js可將一個元素渲染為canvas，然後Promise物件會將擷取的圖片傳遞給引數canvas。
html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); - 第二步：canvas轉image
上一步生成的canvas即為包含目標元素的canvas元素物件。實現儲存圖片的目標只需要將canvas轉image即可。
基於原生canvas的toDataURL方法將canvas輸出為data: URI型別的圖片地址，再將該圖片地址賦值給元素的src屬性即可。
（3）生成的圖片清晰度優化
- 將canvas的屬性width和height屬性放大為2倍（或者設定為devicePixelRatio倍），最後將canvas的CSS樣式width和height設定為原先1倍的大小。
www.cnblogs.com/regina1123/…
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas> - 更改百分比佈局為px佈局
如果原來使用百分比設定元素寬高，請更改為px為單位的寬高，避免樣式二次計算導致的模糊。 - 關閉canvas預設的抗鋸齒設定
預設情況下，canvas的抗鋸齒是開啟的，需要關閉抗鋸齒來實現影象的銳化 （imageSmoothingEnabled）。
blog.csdn.net/yiifaa/arti… - 設定模糊元素的width和height為素材原有寬高，然後通過transform: scale進行縮放。這裡scale的數值由具體需求決定。
.targetElem {width: 54px;height: 142px;margin-top:2px;margin-left:17px;transform: scale(0.5)}
（4）跨域圖片的設定
- 針對CDN中的圖片的配置
開啟html2canvas的useCORS配置項(useCORS: true)
如果沒有開啟html2canvas的useCORS配置項，html2canvas會正常執行且不會報錯，但是不會輸出對應的CDN圖片 （已測試同時包含CDN的圖片和本地圖片的資源的頁面，但是隻有本地圖片能夠被正常渲染出來）