前端页面使用html2canvas生成图片

 最近小编一直被这个问题困扰着，公司项目需求：公众号长按图片保存到手机，但是页面上相关内容都是图片和文字（前后端都有）组成，于是乎我到网上各种找办法，最后锁定了这个html2canvas前端生成图片（canvas画布）的方法，但是问题随之而来，网上各种大佬的代码不是少这就是少那，对于刚入行半年的萌新来说有的根本看不懂，但是皇天不负有心人最后我终于找到了一篇代码解决了这个事情，接下来把代码放上来~

首先引入两个js文件：

HTML代码：

我是大帅哥
	

	

    
    

        

	    

	        
123
				            
                
123
		
123
	    
	    

		
	    
	
	

	    

	        ● 帅哥名言 

	        1.我是最帅的；

	        2.我是最帅的；

	        3.我是最帅的；

	        4.我是最帅的；

	    
	
	

	    

		此处是动态生成的二维码				
	    
	
	

	    
啦啦啦
	
	

	    

	    

		
	    
	
	

	    

	    

		来自好友我是大帅哥的分享
	    
	
    


		

    

JS代码：

 简单介绍一下html2canvas，将你要生成图片的部分抓取到canvas中，然后调用canvas.toDataURL()方法，将抓取到的页面内容转换成base64字符串赋值给img标签的src属性中，转换成图片显示出来~

具体HTML代码可由各位随意编写，JS代码与我保持一致肯定让你成功，但是别什么都抄，id名字什么的可都写自己的奥，要是因为这种原因来抱怨小编的，小编概不接受！！！

另外还有一个坑小编得告诉大家一下（小编和这个坑抗争了一天半的时间，真是气死我也）：

在HTML文件中编辑完代码在PC浏览器、手机浏览器、微信内置浏览器调试都没问题；

在前端页面编辑器里编写的JSP文件在PC浏览器、手机浏览器、微信内置浏览器调试也没问题；

但是！！！如果你用eclipse（小编一直在用eclipse其他的不清楚）中新建的JSP文件编辑后再调试就无法生成想要的图片，这是为什么呢，小编告诉你：

在eclipse中生成的JSP文件有一个文件头，大家应该都知道：

这说明该文件支持HTML4操作（具体是什么HTML版本，请参照文件头），html2canvas不支持HTML4所以会导致不好使，改成如下形式即可支持HTML5操作~

就是它的原因，小编弄了一天半的时间最后改成，到此问题全部解决！

声明一下：网上好多都说用html2canvas时会遇到跨域问题，导致无法生成图片，这个问题小编不是很清楚，因为我用的这个方法直接就生成出来了，没有遇到其他的问题！