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)到這裏就完成了，如果上面寫的有什麼不合適的，請批評指正，謝謝。