JS 使用html2canvas實現截圖功能的問題記錄和解決方案

在實現“截圖”功能時，遇到幾個bug，研究了一個上午，終於全部解決了；

下面給大家分享下：

1、"圖片資源跨域"，導致無法截圖。

瀏覽器會提示下面的錯誤

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解決方案：將跨域圖片轉換成base64，然后使用base64渲染img標簽；具體方法：http://www.cnblogs.com/minigrasshopper/p/9042686.html

 

2、截圖不完整（寬度方向偶爾不完全）

需要截圖的容器，必須渲染在頁面中才可以，也就是說掛在DOM樹上（display: none;這樣是不行的）；

由於被截圖的容器，我不想讓它展示在視圖中，所以我寫了如下樣式

.capture{
  position: absolute;
  opacity: 0;
  z-index: -999;  
}

但是，發現截圖偶爾寬度不完整，原因很簡單，因為被截圖的容器超出了“視口”的可視范圍（定位的問題）；

總結：被截圖的容器，必須掛在“DOM樹”上，並且必須在“視口”范圍中；

對樣式做修改，改成fixed，這樣相對於body定位；同時設置left、top；（如果被截圖的容器高度超出了視口，那就再說吧）

.capture{
  position: fixed;
  opacity: 0;
  z-index: -999; 
  left: 0;
  top: 0; 
}

 

3、文本樣式錯亂

下面的代碼，在html2canvas截圖后，發現p標簽的樣式正確；h6標簽的樣式不對

原因：canvas繪制中，會將h6的換行繪制進去；

解決方法：標簽和內容之間不換行，如P標簽

<p>111111111</p>
<h6>
    111111111
</h6>