第一步，下载相关js文件
https://blog-static.cnblogs.com/files/linxixinxiang/compression.js
第二步，建立jsp页面
1 1 <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 2 <!DOCTYPE HTML> 3 3 <html> 4 4 <head> 5 5 <meta charset="utf-8"> 6 6 <title>测试</title> 7 7 <script src="plug-in/jquery-plugs/fileupload/js/jquery.1.9.1.min.js"></script> 8 8 <script src="plug-in/jquery-plugs/fileupload/bootstrap/js/bootstrap.min.js"></script> 9 9 <link href="plug-in/jquery-plugs/fileupload/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" /> 1010 <script src="my_plug/compression.js"></script> 1111 <style> 1212 #img { 1313 width: 80px; 1414 height: 30px; 1515 text-align: center; 1616 line-height: 30px; 1717 float: left; 1818 border: solid 1px #1c6a9e; 1919 background-color: #25BA9A; 2020 margin-top: 140px; 2121 border-radius: 10px; 2222 color: rgb(255, 255, 255); 2323 } 2424 2525 #jg { 2626 width: 300px; 2727 height: 300px; 2828 padding: 20px; 2929 } 3030 </style> 3131 <script> 3232 window.onload = function() { 3333 var dd = new compression({ 3434 domId: "img", // 上传图片的Dom 目前只支持id； 3535 type: "jpg", // 压缩后保存图片的类型，目前支持 jpeg , png 参数：jpeg png 3636 fidelity: 0.8, // 压缩比例 (0,1] 3737 imgFile: function(base64) { 3840 $.ajax({ 3941 url:"后台url路径", 4042 type:"post", 4143 data:{base64Data:base64}, 4244 success:function(data){ 4345 var d=$.parseJSON(data); 4446 if(d.success){ 4547 $("#imageval_id").val(d.obj); 4648 $("#jg").attr("src", base64); 4749 } 4850 }, 4951 error:function(){ 5052 5153 } 5254 }); 5356 } 5457 }) 5558 } 5659 5760 function getFilePath() { 5861 return $("#imageval_id").val(); 5962 } 6063 </script> 6164 </head> 6265 6366 <body> 6467 <div id="img">上传图片</div> 6568 <img id="jg" src=""> 6669 <input type="hidden" id="imageval_id" /> 6770 </body> 6871 6972 </html>
第三步，springMvc后台代码
1 1 /** 2 2 * 文件上传 3 3 * @param request 4 4 * @param response 5 5 * @return 6 6 */ 7 7 @RequestMapping(params = "upload", method = RequestMethod.POST) 8 8 @ResponseBody 9 9 public AjaxJson upload(@RequestParam String base64Data ,HttpServletRequest request, HttpServletResponse response) { 1010 AjaxJson j = new AjaxJson(); 1111 String path ="upload/"+CommonDateUtil.getNowTime("yyyyMM"); 1212 String realPath = request.getSession().getServletContext().getRealPath("/") ;// 文件的硬盘真实路径 1313 String xdFilePath=path+"/"+CommonDateUtil.getNowTime("yyyyMMddHHmmssSSS")+".jpg"; 1414 File fileDir = new File(realPath+ path); 1515 boolean judeDirExists = FileUtilTest.judeDirExists(fileDir); 1616 if(!judeDirExists){ 1717 fileDir.mkdirs(); 1818 } 1919 String imageAllFilePath= realPath+xdFilePath; 2020 boolean generateImage = Base64ImageUtil.GenerateImage(base64Data,imageAllFilePath); 2121 if(generateImage){ 2222 j.setSuccess(true); 2323 j.setObj(xdFilePath); 2424 }else{ 2525 j.setSuccess(false); 2626 } 2727 return j; 2828 }
java 根据base64文件流生成图片代码
1 1 import java.io.FileInputStream; 2 2 import java.io.FileOutputStream; 3 3 import java.io.IOException; 4 4 import java.io.InputStream; 5 5 import java.io.OutputStream; 6 6 7 7 import org.jeecgframework.core.testutil.CommonUtil; 8 8 9 9 import sun.misc.BASE64Decoder; 1010 import sun.misc.BASE64Encoder; 1111 1212 public class Base64ImageUtil { 1313 /** 1414 * 将 base64字符串转化为 图片 存储 1515 * @param imgStr base64字符串 1616 * @param imgFilePath 转化为 图片后的保存路径 1717 * @return 1818 */ 1919 public static boolean GenerateImage(String imgStr, String imgFilePath) { 2020 if (imgStr == null) // 图像数据为空 2121 return false; 2222 if(imgStr.indexOf("data:image/jpeg;base64,")!=-1){ 2323 imgStr=imgStr.replace("data:image/jpeg;base64,", ""); 2424 } 2525 BASE64Decoder decoder = new BASE64Decoder(); 2626 try { 2727 // Base64解码 2828 byte[] bytes = decoder.decodeBuffer(imgStr); 2929 for (int i = 0; i < bytes.length; ++i) { 3030 if (bytes[i] < 0) {// 调整异常数据 3131 bytes[i] += 256; 3232 } 3333 } 3434 // 生成jpeg图片 3535 OutputStream out = new FileOutputStream(imgFilePath); 3636 out.write(bytes); 3737 out.flush(); 3838 out.close(); 3939 return true; 4040 } catch (Exception e) { 4141 e.printStackTrace(); 4242 return false; 4343 } 4444 } 4545 /** 4646 * 将图片转化为 base64的字节流 4747 * @param imgFilePath 图片的存储路径 4848 * @return 4949 */ 5050 public static String GetImageStr(String imgFilePath) { 5151 byte[] data = null; 5252 // 读取图片字节数组 5353 try { 5454 InputStream in = new FileInputStream(imgFilePath); 5555 data = new byte[in.available()]; 5656 in.read(data); 5757 in.close(); 5858 } catch (IOException e) { 5959 e.printStackTrace(); 6060 } 6161 // 对字节数组Base64编码 6262 BASE64Encoder encoder = new BASE64Encoder(); 6363 return encoder.encode(data);// 返回Base64编码过的字节数组字符串 6464 } 6565 }
以上代码思路是：先将图片在前台通过 compression.js 的方法 将图片进行压缩为 base64 的文件流，将base64文件流传递到java后台进行接收 然后将 base64流重新转化为图片，百度了半天学习许多大神的方法与思路实现了 图片压缩上传功能，为了方便以后查找记录一下。