JS将html生成为图片并下载（适用于大多数浏览器，包含手机浏览器等（需配合后台处理））(笔记)

（1）html代码

<div id="id="content"">	
    //此处放置需要生成图片的代码
    <div class="order_payCon">
              <div class="submit_pay_success">
                        <h3>您还没有任何订单，赶快开始选购吧！</h3>
                        <a class="shopping_btn">开始购物</a>
              </div>
    </div>
</div>
    <button id="btnSave">转换成图片</button>
	<div id="images"></div>
	<button id="Download">Download</button>

（2）js代码

var btnSave = document.getElementById("btnSave");
var content = document.getElementById("content");
btnSave.onclick = function(){
	html2canvas(content, {
        onrendered: function(canvas) {
        	canvas.setAttribute('id','thecanvas');
            document.getElementById('images').appendChild(canvas);
        }
	});
}
var Download = document.getElementById("Download");
Download.onclick = function(){
	var oCanvas = document.getElementById("thecanvas");
	var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
	//判断是否手机浏览器
    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {
    	$.ajax({
			type : "post",
				url : "/getImg",
				data : {
					"strImg":img_data1
				},
				success : function(data) {
			    	 saveFile(data,'图片名称');
				} 
			});
    }else {
    	 saveFile(img_data1, '图片名称');
    }
}
// 保存图片函数
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};

（3）后台代码（为了处理手机浏览器不能直接下载base64位图片的文件）

   假如你只需要PC浏览器，则不需要看这部分的代码

	@Json
 	@RequestMapping("/getImg")
 	public String getDataUrl(HttpServletRequest request) {
 		String strImg=getParameter("strImg").replace("data:image/png;base64,","");
           String random=new Date().getTime()%100000+""+new Random().nextInt(100000);
 		String time=DateKit.getDays();
 		String imgFilePath=getRequest().getSession()
				.getServletContext()
				.getRealPath("/upload/image")+time+random+".jpg";
 		if(GenerateImage(strImg,imgFilePath))
 		{
 			//将截图的图片保存到数据库
            //... 
 			 return imgFilePath;
 		}
		return "";
 	}
 	 public static boolean GenerateImage(String imgStr,String imgFilePath) 
 	  {  //对字节数组字符串进行Base64解码并生成图片 
 	    if (imgStr == null) //图像数据为空 
 	      return false; 
 	    BASE64Decoder decoder = new BASE64Decoder(); 
 	    try 
 	    { 
 	      //Base64解码 
 	      byte[] b = decoder.decodeBuffer(imgStr); 
 	      for(int i=0;i<b.length;++i) 
 	      { 
 	        if(b[i]<0) 
 	        {//调整异常数据 
 	          b[i]+=256; 
 	        } 
 	      } 
 	      //生成图片 
 	      OutputStream out = new FileOutputStream(imgFilePath);   
 	      out.write(b); 
 	      out.flush(); 
 	      out.close(); 
 	      return true; 
 	    }  
 	    catch (Exception e)  
 	    { 
 	      return false; 
 	    } 
 	  } 

(4)到这里就完成了，如果上面写的有什么不合适的，请批评指正，谢谢。