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>