1. 程式人生 > >把canvas畫布存為圖片並儲存到web目錄下

把canvas畫布存為圖片並儲存到web目錄下

前端程式碼:

$("#saveimg").click(function() {
	var c = document.getElementById("canvas"); //得到id為canvas的畫布元素
	var dataURL = c.toDataURL("image/png");    //轉化為base64編碼的資料
	var imageData = dataURL.substring(22);     //把冗餘欄位去掉 "data:image/png;base64,"
	$.ajax({                                   //通過ajax將圖片資料傳到後臺
	type : 'post',  
	        url : '${pageContext.request.contextPath}/center/CausalImgJson',  
	        data: 'dataURL=' + imageData,  
	        async : false, //同步方式  
	        success : function() {   
	   }  
});  
});

Java程式碼:
@RequestMapping("/CausalImgJson")
public @ResponseBody String causalImgJson(HttpServletRequest request,String dataURL,String test) {
	BASE64Decoder decoder = new BASE64Decoder();
	dataURL = dataURL.replace(" ", "+");//ajax傳輸過來的資料所有"+"都變成了" ";ajax在傳輸“+”和“&”時會丟失資料。
	try {
		byte[] b = decoder.decodeBuffer(dataURL);//轉碼得到圖片資料
		ByteArrayInputStream bais = new ByteArrayInputStream(b);
		BufferedImage bi1 = ImageIO.read(bais);
		String path = request.getSession().getServletContext().getRealPath("/images/cau_img.png"); //獲取絕對路徑
		File w2 = new File(path);
		ImageIO.write(bi1, "png", w2);
	} catch (IOException e) {
		e.printStackTrace();
	}
	String str = "sucess";
	return str;
}