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属性时，可以参照我的方法来进行截图操作。


如果文章内容有错误，欢迎指正。
邮箱：[e-mail]
                                             
        0        0           
	
				
	
					   
html2canvas网页截图处理不可见区域
	  	   
html2canvas网页截图
	  	   
html2canvas 网页截图
	  	   
html2canvas页面截图图片不显示
	  	   
html2canvas页面截图图片不显示
	  	   
html2canvas.js网页截图功能(解决截图不全问题)
	  	   
html2canvas.js网页截图功能(解决截图不全问题)
	  	   
【解决】html2canvas.js截图只截取当前可视区域
	  	   
网页可见区域宽,网页可见区域宽
	  	   
网页可见区域宽 js
	  	   
html2canvas 实现纯JS网页截图简单例子
	  	   
使用html2canvas实现网页截图，并嵌入到PDF
	  	   
html2canvas根据DOM元素样式实现网页截图
	  	   
VUE 移动SPA html2canvas截图不清晰问题
	  	   
js获取网页屏幕可见区域高度
	  	   
js获取网页屏幕可见区域高度
	  	   
js获取网页屏幕可见区域高度
	  	   
s获取网页屏幕可见区域高度
	     		  
	  	   
C++ 虚函数使用注意点  与 多态的关系
	  	   
AngularJS之——页面部分被某重复使用
	  	   
LeetCode-Array-119. Pascal's Triangle II
	  	   
得心
	  	   
随笔1
	  	   
html2canvas网页截图处理不可见区域
	  	   
数据库之多表查询（连接查询）
	  	   
Spring boot log4j maven Jar找不到解决
	  	   
链表的分化（Partition一分为二）
	  	   
Ubuntu静态IP简洁配置
	  	   
Android中BroadcastReceiver的两种注册方式（静态和动态）详解
	  	   
HALCON图像处理的粘连零件颗粒计数
	  	   
第十六周 --项目4 -英文单词的基数排序
	  	   
欢迎使用CSDN-markdown编辑器