把canvas畫布存為圖片並儲存到web目錄下
阿新 • • 發佈:2019-01-30
前端程式碼:
$("#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; }