springmvc 图片 压缩上传

第一步,下载相关js文件

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

第二步,建立jsp页面

 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后台代码

 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文件流生成图片代码

 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流重新转化为图片,百度了半天学习许多大神的方法与思路实现了 图片压缩上传功能,为了方便以后查找记录一下。

posted @ 2019-07-09 19:00  我爱香香  阅读(508)  评论(0编辑  收藏  举报