html2canvas-實現頁面截圖

如何將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的圖片和本地圖片的資源的頁面，可是隻有本地圖片可以被正常渲染出來）