springmvc 图片压缩上传

时间 2020-05-25

原文原文链接

第一步，下载相关js文件css

https://blog-static.cnblogs.com/files/linxixinxiang/compression.js

第二步，创建jsp页面html

 1 <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML>
 3 <html>
 4     <head>
 5         <meta charset="utf-8">
 6         <title>测试</title>
 7         <script src="plug-in/jquery-plugs/fileupload/js/jquery.1.9.1.min.js"></script>
 8         <script src="plug-in/jquery-plugs/fileupload/bootstrap/js/bootstrap.min.js"></script>
 9         <link href="plug-in/jquery-plugs/fileupload/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
10         <script src="my_plug/compression.js"></script>
11         <style>
12  #img {
13  width: 80px;
14  height: 30px;
15  text-align: center;
16  line-height: 30px;
17  float: left;
18  border: solid 1px #1c6a9e;
19  background-color: #25BA9A;
20  margin-top: 140px;
21  border-radius: 10px;
22  color: rgb(255, 255, 255);
23             }
24             
25  #jg {
26  width: 300px;
27  height: 300px;
28  padding: 20px;
29             }
30         </style>
31         <script>
32  window.onload = function() { 33                 var dd = new compression({ 34  domId: "img", // 上传图片的Dom 目前只支持id；
35  type: "jpg", // 压缩后保存图片的类型，目前支持 jpeg , png 参数：jpeg png
36  fidelity: 0.8, // 压缩比例 (0,1]
37  imgFile: function(base64) {
40  $.ajax({ 41  url:"后台url路径", 42  type:"post", 43  data:{base64Data:base64}, 44  success:function(data){ 45                                 var d=$.parseJSON(data); 46                                 if(d.success){ 47  $("#imageval_id").val(d.obj); 48  $("#jg").attr("src", base64); 49  } 50  }, 51  error:function(){ 52                                
53  } 54  });
56  } 57  }) 58  } 59 
60             function getFilePath() { 61                 return $("#imageval_id").val(); 62  } 63         </script>
64     </head>
65 
66     <body>
67         <div id="img">上传图片</div>
68         <img id="jg" src="">
69         <input type="hidden" id="imageval_id" />
70     </body>
71 
72 </html>

第三步，springMvc后台代码java

 1     /**
 2  * 文件上传  3  * @param request  4  * @param response  5  * @return
 6      */
 7     @RequestMapping(params = "upload", method = RequestMethod.POST)  8  @ResponseBody  9     public AjaxJson upload(@RequestParam String base64Data ,HttpServletRequest request, HttpServletResponse response) { 10         AjaxJson j = new AjaxJson(); 11         String path ="upload/"+CommonDateUtil.getNowTime("yyyyMM"); 12         String realPath = request.getSession().getServletContext().getRealPath("/") ;// 文件的硬盘真实路径
13         String xdFilePath=path+"/"+CommonDateUtil.getNowTime("yyyyMMddHHmmssSSS")+".jpg"; 14         File fileDir = new File(realPath+ path); 15         boolean judeDirExists = FileUtilTest.judeDirExists(fileDir); 16         if(!judeDirExists){ 17  fileDir.mkdirs(); 18  } 19         String imageAllFilePath= realPath+xdFilePath; 20         boolean generateImage = Base64ImageUtil.GenerateImage(base64Data,imageAllFilePath); 21         if(generateImage){ 22             j.setSuccess(true); 23  j.setObj(xdFilePath); 24         }else{ 25             j.setSuccess(false); 26  } 27         return j; 28     }

java 根据base64文件流生成图片代码jquery

 1 import java.io.FileInputStream;  2 import java.io.FileOutputStream;  3 import java.io.IOException;  4 import java.io.InputStream;  5 import java.io.OutputStream;  6 
 7 import org.jeecgframework.core.testutil.CommonUtil;  8 
 9 import sun.misc.BASE64Decoder; 10 import sun.misc.BASE64Encoder; 11 
12 public class Base64ImageUtil { 13     /**
14  * 将 base64字符串转化为 图片 存储 15  * @param imgStr base64字符串 16  * @param imgFilePath 转化为 图片后的保存路径 17  * @return
18      */
19     public static boolean GenerateImage(String imgStr, String imgFilePath) { 20         if (imgStr == null) // 图像数据为空
21             return false; 22         if(imgStr.indexOf("data:image/jpeg;base64,")!=-1){ 23             imgStr=imgStr.replace("data:image/jpeg;base64,", ""); 24  } 25         BASE64Decoder decoder = new BASE64Decoder(); 26         try { 27             // Base64解码
28             byte[] bytes = decoder.decodeBuffer(imgStr); 29             for (int i = 0; i < bytes.length; ++i) { 30                 if (bytes[i] < 0) {// 调整异常数据
31                     bytes[i] += 256; 32  } 33  } 34             // 生成jpeg图片
35             OutputStream out = new FileOutputStream(imgFilePath); 36  out.write(bytes); 37  out.flush(); 38  out.close(); 39             return true; 40         } catch (Exception e) { 41  e.printStackTrace(); 42             return false; 43  } 44  } 45     /**
46  * 将图片转化为 base64的字节流 47  * @param imgFilePath 图片的存储路径 48  * @return
49      */
50     public static String GetImageStr(String imgFilePath) { 51         byte[] data = null; 52         // 读取图片字节数组
53         try { 54             InputStream in = new FileInputStream(imgFilePath); 55             data = new byte[in.available()]; 56  in.read(data); 57  in.close(); 58         } catch (IOException e) { 59  e.printStackTrace(); 60  } 61         // 对字节数组Base64编码
62         BASE64Encoder encoder = new BASE64Encoder(); 63         return encoder.encode(data);// 返回Base64编码过的字节数组字符串
64  } 65 }

以上代码思路是：先将图片在前台经过 compression.js 的方法将图片进行压缩为 base64 的文件流，将base64文件流传递到java后台进行接收而后将 base64流从新转化为图片，百度了半天学习许多大神的方法与思路实现了图片压缩上传功能，为了方便之后查找记录一下。ajax

springmvc 图片 压缩上传

springmvc 图片压缩上传