使用html2canvas.js实现页面截图

由于最近项目需求，需要实现html页面截图，经过查资料，找到了这个东东html2canvas，刚开始截出来的图片，空白、模糊、图片不完整，各种问题，但幸好有各路大神的见解，把问题解决了，以下是我写的一个demo，仅供大家参考哦

1、html页面引入两个js，html2canvas.js里面不用改东西哦

2、css样式：

.main{width:100%; background-color: #fff; color:#000;}
.main h2{ text-align: center;}
.main p{ text-align: left; padding: 0;}
.main hr{ margin-top: 0.3rem;}
.main table{ width: 100%;border-collapse: collapse;border-spacing: 0;}
.main table td,.main table th{ padding: 0.5rem; border:1px solid #ccc; text-align: center;}
.btn{ width: 6rem; height: 2rem; line-height: 2rem; text-align: center; color: #fff; background: red; }

3、html布局：

	
	
点击截图
    

        

            
哈哈哈
            

            
我在测试
            
我真的在测试
            
呀哈，你在测试
            
嗯哪，我在测试
            

                

	                

	                    
姓名
	                    
性别
	                    
年龄
	                    
爱好
	                
                
                

	                

	                    
张三
	                    
男
	                    
23
	                    
笑
	                
	                

	                    
李四
	                    
男
	                    
23
	                    
笑
	                
	                

	                    
王五
	                    
男
	                    
23
	                    
笑
	                
	                

	                    
赵六
	                    
男
	                    
23
	                    
笑
	                
	                

	                    
李七
	                    
男
	                    
23
	                    
笑
	                
                
            
            
            
结束了，ending
        
    

4、js：

左图为html页面，右图为截出来的图片

来自：1、https://www.cnblogs.com/yanweidie/p/5203943.html

  2、http://html2canvas.hertzen.com/documentation