html2canvas网页截图处理不可见区域

最近的一个项目中，涉及到网页截屏的功能，正常通过后端php GD扩展处理的图片并不如人意，所以经过一翻搜索，找到了html2canvas这个工具，话不多说先上代码

首先引入html2canvas。

<script src="js/html2canvas.min.js"></script>

然后执行截图功能

html2canvas(DOM, {  //DOM为文档节点对象 如：$('body') 或 document.getElementById('xx')
onrendered: function(canvas) {
var data=canvas.toDataURL("image/jpg");//生成的格式
//data 为base64格式的图片编码，将data放如src中即可阅览图片
}
});

但是，这次是应用在H5中，要截取的是一个应用了iscroll的滚动区域，通常来讲，html2canvas只能截取到浏览器中的可见区域。

为了克服这个问题，再进行搜索看到很多人提到 allowTaint 这个属性，但是设置后并没有效果，同时从官方的文档了解到html2canvas对与css3的支持很不友好，经过一番痛苦的挣扎后，尝试通过另一条途径来解决。
html2canvas是通过选取dom节点，来进行canvas绘制，当元素设置为不可见的时候是无法绘制的，所以我采用了一种取巧的方法，在html2canvas方法出发前，将准备截图的dom节点复制到一个隐藏在页面最下层的dom节点内，将该节点的层级设置为最底层，即：z-index最小。

  position: absolute;

  z-index: 0;
截图时，选取dom节点为该节点，就可以完整的将所有区域都截取到！

然后我们就可以在onrendered回调中对截取的图片进行处理。

如果你在项目中又遇到要截取的dom节点有css3属性时，可以参照我的方法来进行截图操作。

如果文章内容有错误，欢迎指正。

邮箱：jackqth@163.com