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