JS 使用html2canvas实现截图功能的问题记录和解决方案

在实现“截图”功能时，遇到几个bug，研究了一个上午，终于全部解决了；

下面给大家分享下：

浏览器会提示下面的错误

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

解决方案：将跨域图片转换成base64，然后使用base64渲染img标签；具体方法：http://www.cnblogs.com/minigrasshopper/p/9042686.html

需要截图的容器，必须渲染在页面中才可以，也就是说挂在DOM树上（display: none;这样是不行的）；

由于被截图的容器，我不想让它展示在视图中，所以我写了如下样式

.capture{

  position: absolute;

  opacity: ;

  z-index: -;

}

但是，发现截图偶尔宽度不完整，原因很简单，因为被截图的容器超出了“视口”的可视范围（定位的问题）；

总结：被截图的容器，必须挂在“DOM树”上，并且必须在“视口”范围中；

对样式做修改，改成fixed，这样相对于body定位；同时设置left、top；（如果被截图的容器高度超出了视口，那就再说吧）

.capture{

  position: fixed;

  opacity: ;

  z-index: -;

  left: ;

  top: ;

}

下面的代码，在html2canvas截图后，发现p标签的样式正确；h6标签的样式不对

原因：canvas绘制中，会将h6的换行绘制进去；

解决方法：标签和内容之间不换行，如P标签

<p></p>

<h6>

</h6>

秒客网