html2canvas 截屏后上传到服务器端（springmvc3）

利用html2canvas截屏后可以生成base64类型的图片，但是这样的图片很明显不能被引用或者被SNS工具来分享。这样就必须截屏后再上传数据到后台服务器端重新保存。

前端js代码：

Java代码  

1. $("#saveImage").click(function() {  
2.                 html2canvas($('#mypics'), {  
3.                     onrendered : function(canvas) {  
4.                         var myImage = canvas.toDataURL("image/jpeg");  
5.                         //并将图片上传到服务器用作图片分享  
6.                         $.ajax({  
7.                             type : "POST",  
8.                             url : '${ctx}/qsupload',  
9.                             data : {data:myImage},  
10.                             timeout : 60000,  
11.                             success : function(data){  
12.                                 $('#myShowImage').attr('src', '${ctxStatic}/usertemp/'+data+'.jpg'); //服务器上保存图片路径，data是返回的文件名。  
13.                             }  
14.                         });  
15.                     }  
16.                 });  
17.             });  

后端代码

Java代码  

1. import org.apache.commons.codec.binary.Base64;  
2.   
3. @RequestMapping(value = { "${frontPath}/qsupload" }, method = { RequestMethod.POST })  
4.     @ResponseBody  
5.     public String petUpgradeTarget(HttpServletRequest request, String data) {  
6.         String serverPath = request.getSession().getServletContext()  
7.                 .getRealPath("/");  
8.         Base64 base64 = new Base64();  
9.         try {  
10.   
11.       //注意点：实际的图片数据是从 data:image/jpeg;base64, 后开始的  
12.             byte[] k = base64.decode(data.substring("data:image/jpeg;base64,"  
13.                     .length()));  
14.             InputStream is = new ByteArrayInputStream(k);  
15.             String fileName = UUID.randomUUID().toString();  
16.             String imgFilePath = serverPath + "\\static\\usertemp\\" + fileName + ".jpg";  
17.   
18.                        //以下其实可以忽略，将图片压缩处理了一下，可以小一点  
19.   
20.             double ratio = 1.0;  
21.             BufferedImage image = ImageIO.read(is);  
22.             int newWidth = (int) (image.getWidth() * ratio);  
23.             int newHeight = (int) (image.getHeight() * ratio);  
24.             Image newimage = image.getScaledInstance(newWidth, newHeight,  
25.             Image.SCALE_SMOOTH);  
26.             BufferedImage tag = new BufferedImage(newWidth, newHeight,  
27.                     BufferedImage.TYPE_INT_RGB);  
28.             Graphics g = tag.getGraphics();  
29.             g.drawImage(newimage, 0, 0, null);  
30.             g.dispose();  
31.             ImageIO.write(tag, "jpg", new File(imgFilePath));  
32.             return fileName;  
33.         } catch (Exception e) {  
34.             return "error";  
35.         }  
36.     }