移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

时间：2022-05-02 04:08:25

现在科技太发达，移动设备像素越来越高，随便一张照片2M+，但是要做移动端图片上传和pc上略有不同，移动端你不能去限制图片大小，让用户先处理图片再上传，这样不现实。所以理解的解决方案就是在上传先进行图片压缩，然后再把压缩后的图片上传到服务器。

localResizeIMG，它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式，那么我们就可以把这个base64通过ajax传到后台，再进行保存，先压缩后上传的目的就达到了。

 

处理过程:

LocalResizeIMG压缩图片

Ajax Post图片base64到后台

后台接收base64并保存，返回状态

 

包含：

LocalResizeIMG.js（插件主体,压缩图片）

mobileBUGFix.mini.js（移动端的补丁,包括MegaPixImage.js）

exif.js

 

在线任意图片转Base64编码工具 - aTool在线工具

 

LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android

源码：https://github.com/think2011/localResizeIMG

 

使用lrz压缩上传图片，后台使用java

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（一）

 

exif.js(lrz.js控件中使用了)：

Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。

Exif.js 读取图像的元数据

利用exif.js解决ios手机上传竖拍照片旋转90度问题

 

(java)利用BASE64编码和解码图片文件

 

代码：

效果：

 
移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
 

HTML：

Html代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. <!-- 上传图片时显示“正在上传..请等待”，上传后显示各图片-->  
  2. <li class="pic-list"></li>    
  3.   
  4. <li class="upload">  
  5.     <input type="file" accept="image/*" id="cameraInput" name="cameraInput">  
  6.     上传图片  
  7. </li>  
  8.   
  9. <!-- 引用-->：  
  10. <script type="text/javascript" src="${staticServerUrl}/js/lrz/mobileFix.mini.js?v=20150704"></script>  
  11. <script type="text/javascript" src="${staticServerUrl}/js/lrz/exif.js?v=20150704"></script>  
  12. <script type="text/javascript" src="${staticServerUrl}/js/lrz/lrz.js?v=20150704"></script>  

 

JS：

Js代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. var input = document.querySelector('#cameraInput');  
  2. var types = [".jpg",".jpeg",".gif",".png"];  
  3. var mpiArr = [];  
  4. var index = 0;  
  5.   
  6.   
  7. input.onchange = function () {  
  8.       
  9.     var file = this.files[0];  
  10.     var span = document.createElement('span');  
  11.     var fileName = file.name;  
  12.     var imgSize = file.size;  
  13.     if(!checkFileType(fileName)) {  
  14.         alert("文件类型必须为jpg/jpeg/gif/png");  
  15.         return;  
  16.     }  
  17.     if(imgSize > 3*1024*1024) { //大于2M  
  18.         alert("请上传小于3M的文件");  
  19.         return;  
  20.     }  
  21.     document.querySelector('.pic-list').appendChild(span);  
  22.     span.innerHTML = '<p>正在上传..请等待</p>';  
  23.       
  24.     lrz(file, {  
  25.         before: function() {  
  26.         },  
  27.         fail: function(err) {  
  28.             //console.error(err);  
  29.         },  
  30.         always: function() {  
  31.         },  
  32.         done: function (results) {  
  33.           
  34.         setTimeout(function () {  
  35.             $.post(  
  36.                 "/ajax/uploadImg.do",  
  37.                 {  
  38.                     imgBase64: results.base64,  
  39.                     imgSize: results.base64.length, // 校验用，防止未完整接收  
  40.                     imgName : fileName  
  41.                 },  
  42.                 function (data) {  
  43.                         var rData = eval('(' + data + ')');                          
  44.                           
  45.                         var img = document.createElement('img');  
  46.                           
  47.                         var timestamp=new Date().getTime();  
  48.                         var idx = "img" + fileName.substring(0, fileName.indexOf(".")) + timestamp;  
  49.                         $(span).attr("class" ,"imgSpan");  
  50.                         $(span).attr("id" ,idx);  
  51.                         $(span).attr("name" ,rData.path);  
  52.                           
  53.                         if(!rData.ret || rData.content != "ok") {  
  54.                             span.innerHTML = '<p>上传失败</p>';  
  55.                         } else {  
  56.                             span.innerHTML = '<p>上传成功</p>';  
  57.                             //用于上传完成后直接展示图片  
  58.                             var mpImg = new MegaPixImage(file);                           
  59.                             mpImg.render(img, { maxWidth: 150, maxHeight: 150, quality: 0.5 });   
  60.                             mpiArr.push({"id":idx,"mpi":mpImg});  
  61.                             span.innerHTML = "";  
  62.                             span.appendChild(img);  
  63.                         }  
  64.                     }  
  65.             );  
  66.         }, 100);  
  67.         }  
  68.     });  
  69. };  

 

Js代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. //用于点击上传展示的图片时，往指定位置(ueditor编辑器里)插入该图片  
  2. $(document).on("click",".imgSpan",function(){  
  3.     var id = $(this).attr("id");  
  4.     var imgSrc = $(this).attr("name");  
  5.     var mpi;  
  6.     $.each(mpiArr, function(index,value){  
  7.         if(value.id == id) {  
  8.             mpi = value.mpi;  
  9.         }  
  10.     });  
  11.     var idx = id + index++;  
  12.     //ueditor的对象um  
  13.     um.focus();  
  14.     um.execCommand('inserthtml',"<img id='" + idx + "' src='" + imgSrc + "' _src='" + imgSrc + "' ></img>");  
  15.     mpi.render($(window.frames["1"].document).find("#"+idx).get(0), { maxWidth: 150, maxHeight: 150, quality: 0.5, _src: imgSrc });   
  16. });  

 

Js代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. String.prototype.endWith=function(str){  
  2.   if(str==null||str==""||this.length==0||str.length>this.length)  
  3.      return false;  
  4.   if(this.substring(this.length-str.length)==str)  
  5.      return true;  
  6.   else  
  7.      return false;  
  8.   return true;  
  9.  }  
  10.   
  11. function checkFileType(name) {  
  12.     var flag = false;  
  13.     $.each(types,function(index,value) {  
  14.         if(name.endWith(value)) {  
  15.             flag = true;  
  16.         }  
  17.     })  
  18.     return flag;  
  19. }  

 后台：

入口：

Java代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. /** 
  2.      * 上传图片 
  3.      */  
  4.     public String uploadImg() {  
  5.         if(!checkFileType(getFileExt(imgName))) {  
  6.             CDO result = new CDO();  
  7.             result.setBooleanValue("ret", false);  
  8.             result.setStringValue("content", "文件应为jpg,jpeg,gif,png");  
  9.             ajaxForAction(response, result.toJSON());  
  10.             return null;  
  11.         }  
  12.         String imgFilePath = saveBase64toLocal(getFileName(imgName));  
  13.         String returnStr = uploadtoImgServer(imgFilePath);  
  14.         ajaxForAction(response, returnStr);  
  15.   
  16.         return null;  
  17.     }  
  18.   
  19. /** 
  20.      * 文件类型判断 
  21.      */  
  22.     private boolean checkFileType(String fileName) {  
  23.         String imgAllowTypes = ProPertiesUtil.getValue("/topic.properties", "img_allow_types");  
  24.         String[] allowFiles = imgAllowTypes.split(";");  
  25.         Iterator<String> type = Arrays.asList(allowFiles).iterator();  
  26.         while (type.hasNext()) {  
  27.             String ext = type.next();  
  28.             if (fileName.toLowerCase().endsWith(ext)) {  
  29.                 return true;  
  30.             }  
  31.         }  
  32.         return false;  
  33.     }  
  34.       
  35. /** 
  36.      * 获取文件扩展名 
  37.      */  
  38.     private String getFileExt(String fileName) {  
  39.         return fileName.substring(fileName.lastIndexOf("."));  
  40.     }  
  41.   
  42.     /** 
  43.      * 依据原始文件名生成新文件名 
  44.      */  
  45.     private String getFileName(String fileName) {  
  46.         String radomStr = new SimpleDateFormat("yyyyMMddHHmmsss").format(new Date());  
  47.         return fileName.substring(0,fileName.lastIndexOf(".")) + radomStr + this.getFileExt(fileName);  
  48.     }  
  49.     /** 
  50.      * 保存图片到临时文件目录 
  51.       
  52.      *  #本地临时图片存储地址 
  53.      *  tmp_img_path=/upload 
  54.      *  #允许上传的图片类型 
  55.      *  img_allow_types=.jpg;.jpeg;.gif;.png 
  56.      */  
  57.     private String saveBase64toLocal(String fileName) {  
  58.         String imgFilePath = "";  
  59.           
  60.         Long userId = getLoginID();  
  61.         logger.info("添加图片，用户id:"+userId+",版块id:"+boardID+",图片名:"+imgName);  
  62.         int index = imgBase64.indexOf(";base64,");  
  63.         String base64Str = imgBase64.substring(index + ";base64,".length());  
  64.           
  65.         String tmpImgPath = ProPertiesUtil.getValue("/abc.properties", "tmp_img_path");  
  66.         imgFilePath = getPhysicalPath(tmpImgPath) + File.separator + fileName;// 新生成的图片  
  67.   
  68.         BASE64Decoder decoder = new BASE64Decoder();  
  69.         OutputStream out = null;  
  70.         try {  
  71.             // Base64解码  
  72.             byte[] b = decoder.decodeBuffer(base64Str);  
  73.             for (int i = 0; i < b.length; ++i) {  
  74.                 if (b[i] < 0) {// 调整异常数据  
  75.                     b[i] += 256;  
  76.                 }  
  77.             }  
  78.             // 生成jpeg图片  
  79.             out = new FileOutputStream(imgFilePath);  
  80.             out.write(b);  
  81.             out.flush();  
  82.         } catch (Exception e) {  
  83.             logger.error(e.getMessage(), e);  
  84.         } finally {  
  85.             try{  
  86.                 out.close();  
  87.             }catch (Exception e) {  
  88.                 logger.error(e.getMessage(), e);  
  89.             }  
  90.         }  
  91.         logger.info("成功添加图片，用户id:"+userId+",版块id:"+boardID+",图片位置:"+ imgFilePath);  
  92.           
  93.         return imgFilePath;  
  94.   
  95.     }  
  96.   
  97.     /** 
  98.      * 根据传入的虚拟路径获取物理路径 
  99.      */  
  100.     private String getPhysicalPath(String savePath) {  
  101.         return ServletActionContext.getServletContext().getRealPath(savePath);  
  102.     }  
  103.       
  104.     /** 
  105.      * 上传图片到服务器 
  106.      * httpclient-4.0.1.jar  
  107.      * httpmime-4.0.1.jar 
  108.          * img_server_path=http://...com/BBSPicServlet 
  109.      */  
  110.     private String uploadtoImgServer(String filePath) {  
  111.         String returnStr = "";  
  112.   
  113.         Long userId = getLoginID();  
  114.         logger.info("上传图片服务器，用户id:"+userId+",版块id:"+boardID+",图片路径:"+filePath);  
  115.           
  116.         String IMAGE_FTP_PATH = ProPertiesUtil.getValue("/server.properties", "img_server_path");  
  117.         HttpClient httpclient = new DefaultHttpClient();  
  118.         HttpPost post = new HttpPost(IMAGE_FTP_PATH);  
  119.         File file = new File(filePath);  
  120.         FileBody fileBody = new FileBody(file);  
  121.         try {  
  122.   
  123.             MultipartEntity entity = new MultipartEntity();  
  124.             entity.addPart("file", fileBody);  
  125.             post.setEntity(entity);  
  126.             HttpResponse response = httpclient.execute(post);  
  127.             logger.info("图片服务器返回code：" + response.getStatusLine().getStatusCode());  
  128.             if (HttpStatus.SC_OK == response.getStatusLine().getStatusCode()) {  
  129.   
  130.                 HttpEntity entitys = response.getEntity();  
  131.                 if (entitys != null) {  
  132.                     //resultLen = entity.getContentLength();  
  133.                     returnStr = EntityUtils.toString(entitys);  
  134.                 }  
  135.             }  
  136.             httpclient.getConnectionManager().shutdown();  
  137.               
  138.             //删除本地  
  139.             file.delete();  
  140.         } catch (UnsupportedEncodingException e) {  
  141.             logger.error(e.getMessage(), e);  
  142.         } catch (ClientProtocolException e) {  
  143.             logger.error(e.getMessage(), e);  
  144.         } catch (IOException e) {  
  145.             logger.error(e.getMessage(), e);  
  146.         }  
  147.         logger.info("成功上传图片服务器，用户id:"+userId+",版块id:"+boardID+",服务器返回:"+returnStr );  
  148.           
  149.         return returnStr;  
  150.     }  

 

Java代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. package com.duogou9g.bbs;  
  2.   
  3. import java.io.File;  
  4. import java.io.IOException;  
  5. import java.io.PrintWriter;  
  6. import java.util.Date;  
  7. import java.util.Iterator;  
  8. import java.util.List;  
  9. import java.util.UUID;  
  10. import java.util.regex.Matcher;  
  11. import java.util.regex.Pattern;  
  12.   
  13. import javax.servlet.ServletException;  
  14. import javax.servlet.http.HttpServlet;  
  15. import javax.servlet.http.HttpServletRequest;  
  16. import javax.servlet.http.HttpServletResponse;  
  17.   
  18. import org.apache.commons.fileupload.FileItem;  
  19. import org.apache.commons.fileupload.FileUploadException;  
  20. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  21. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  22. import org.apache.log4j.Logger;  
  23.   
  24. import com.duogou9g.DateUtils;  
  25. import com.duogou9g.PICServlet;  
  26. import com.duogou9g.ProPertiesUtil;  
  27. import com.util.KingCloudUtil;  
  28.   
  29. /** 
  30.  * bbs 图片上传 
  31.  *  
  32.  * @author Administrator 
  33.  *  
  34.  */  
  35. public class BBSPicServlet extends HttpServlet {  
  36.     private static String savePath = ProPertiesUtil.getValue(  
  37.             "/path.properties", "bbsimgpath");  
  38.     private Logger logger = Logger.getLogger(PICServlet.class);  
  39.   
  40.     public void doGet(HttpServletRequest req, HttpServletResponse resp)  
  41.             throws ServletException, IOException {  
  42.         // TODO Auto-generated method stub  
  43.         super.doGet(req, resp);  
  44.     }  
  45.   
  46.     private boolean isEmpty(String str) {  
  47.         if (str == null || "".equals(str.trim()))  
  48.             return true;  
  49.         return false;  
  50.     }  
  51.   
  52.     private boolean checkInt(String str) {  
  53.         String reg = "^[0-9]+$";  
  54.         Pattern pattern = Pattern.compile(reg);  
  55.         Matcher matcher = pattern.matcher(str);  
  56.         return matcher.matches();  
  57.   
  58.     }  
  59.   
  60.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  61.             throws ServletException, IOException {  
  62.         // TODO Auto-generated method stub  
  63.         String filenames = "";  
  64.         String res = "";  
  65.         String datap = "";  
  66.         // 如果有尺寸，检查尺寸  
  67.         logger.info("==get==================");  
  68.         String picWidth = request.getParameter("picWidth");  
  69.         String picHeigth = request.getParameter("picHeigth");  
  70.         if (!isEmpty(picWidth) || !isEmpty(picHeigth)) {  
  71.             if (!checkInt(picWidth) || !checkInt(picHeigth)) {  
  72.                 response.setContentType("text/html;charset=UTF-8");  
  73.                 PrintWriter out = response.getWriter();  
  74.                 out.println("{'ret':'false','content':'尺寸错误'}");  
  75.                 out.close();  
  76.                 return;  
  77.             }  
  78.   
  79.         }  
  80.   
  81.         DiskFileItemFactory fac = new DiskFileItemFactory();  
  82.         ServletFileUpload upload = new ServletFileUpload(fac);  
  83.         upload.setHeaderEncoding("UTF-8");  
  84.         upload.setFileSizeMax(2 * 1024 * 1024);  
  85.         List fileList = null;  
  86.         try {  
  87.             fileList = upload.parseRequest(request);  
  88.         } catch (FileUploadException e) {  
  89.             // TODO Auto-generated catch block  
  90.             logger.error(e.getMessage(), e);  
  91.             response.setContentType("text/html;charset=UTF-8");  
  92.             PrintWriter out = response.getWriter();  
  93.             out.println("{'ret':'false','content':'图片过大,不能大于500K'}");  
  94.             out.close();  
  95.             return;  
  96.         }  
  97.         String name = "";  
  98.         String extName = "";  
  99.         long size = 0;  
  100.         String fileName = "";  
  101.         Iterator<FileItem> it = fileList.iterator();  
  102.         while (it.hasNext()) {  
  103.             FileItem item = it.next();  
  104.             if (!item.isFormField()) {  
  105.                 name = item.getName();  
  106.                 if (name == null || name.trim().equals("")) {  
  107.                     continue;  
  108.                 }  
  109.                 size = item.getSize();  
  110.                 if ("".equals(name) || size == 0) {  
  111.                     break;  
  112.                 }  
  113.                 String t_name = name.substring(name.lastIndexOf("\\") + 1);  
  114.                 logger.info("=================" + t_name);  
  115.                 String t_ext = t_name.substring(t_name.lastIndexOf(".") + 1);  
  116.                 String[] allowedExt = { "jpg", "jpeg", "gif", "png" };  
  117.                 int allowFlag = 0;  
  118.                 int allowedExtCount = allowedExt.length;  
  119.                 for (; allowFlag < allowedExtCount; allowFlag++) {  
  120.                     if (allowedExt[allowFlag].equals(t_ext.toLowerCase()))  
  121.                         break;  
  122.                 }  
  123.                 if (allowFlag == allowedExtCount) {  
  124.                     res = "文件应为: jpg,jpeg,gif,png";  
  125.                     response.setContentType("text/html;charset=UTF-8");  
  126.                     PrintWriter out = response.getWriter();  
  127.                     out.println("{'ret':'false','content':'文件应为jpg,jpeg,gif,png'}");  
  128.                     out.close();  
  129.                     return;  
  130.                 } else {  
  131.                     if (name.lastIndexOf(".") >= 0) {  
  132.                         extName = name.substring(name.lastIndexOf("."));  
  133.                     }  
  134.   
  135.                     String all = DateUtils.simpleDateFormat(  
  136.                             "yyyy-MM-dd HH:mm:ss", new Date());  
  137.                     String hour = all.split(" ")[1].split(":")[0];  
  138.                     String aa[] = all.split(" ")[0].split("-");  
  139.                     // savePath = savePath+"/"+aa[0]+"/"+aa[1]+"/"+aa[2];  
  140.                     datap = "/" + aa[0] + "/" + aa[1] + "/" + aa[2] + "/"+ hour;  
  141.                     String newDir = savePath + datap;  
  142.                     File file = new File(newDir);  
  143.                     if (!file.exists()) {  
  144.                         file.mkdirs();  
  145.                     }  
  146.   
  147.                     fileName = UUID.randomUUID().toString().replaceAll("-", "");  
  148.   
  149.                     File saveFile = new File(newDir + "/" + fileName + extName);  
  150.                     filenames = fileName + extName;  
  151.                     String bucket = ProPertiesUtil.getValue(  
  152.                             "/accesskey.properties", "bbsbucket");  
  153.                     Boolean tokingok = false;  
  154.                     try {  
  155.                         item.write(saveFile);  
  156.                         // 如果有尺寸，检查尺寸  
  157.                         if (!isEmpty(picWidth) || !isEmpty(picHeigth)) {  
  158.                             java.awt.image.BufferedImage bi = javax.imageio.ImageIO  
  159.                                     .read(saveFile);  
  160.   
  161.                             if (bi.getWidth() != Integer.parseInt(picWidth)  
  162.                                     || bi.getHeight() != Integer  
  163.                                             .parseInt(picHeigth)) {  
  164.                                 saveFile.delete();  
  165.                                 response.setContentType("text/html;charset=UTF-8");  
  166.                                 PrintWriter out = response.getWriter();  
  167.                                 out.println("{'ret':'false','content':'文件尺寸不对'}");  
  168.                                 out.close();  
  169.                                 return;  
  170.                             }  
  171.   
  172.                             // 发送到云  
  173.                             tokingok = KingCloudUtil.uploadObjectByFile(bucket,  
  174.                                     "img" + datap + "/" + filenames, saveFile);  
  175.                             // 本地删除  
  176.   
  177.                         } else {  
  178.                             // 发传送到云  
  179.                             tokingok = KingCloudUtil.uploadObjectByFile(bucket,  
  180.                                     "img" + datap + "/" + filenames, saveFile);  
  181.                         }  
  182.                         saveFile.delete();  
  183.   
  184.                         logger.info("====ok====="+ filenames);  
  185.                           
  186.                         if (tokingok == true) {  
  187.                             response.setContentType("text/html;charset=UTF-8");  
  188.                             PrintWriter out = response.getWriter();  
  189.                             String str = "{'ret':'true','content':'ok','path':'"  
  190.                                     + ProPertiesUtil.getValue(  
  191.                                             "/accesskey.properties",  
  192.                                             "bbsimgurl")  
  193.                                     + "/img"  
  194.                                     + datap  
  195.                                     + "/"  
  196.                                     + filenames + "'}";  
  197.                             out.println(str);  
  198.                             out.close();  
  199.                         } else {  
  200.                             response.setContentType("text/html;charset=UTF-8");  
  201.                             PrintWriter out = response.getWriter();  
  202.                             String str = "{'ret':'false','content':'云出错'}";  
  203.                             out.println(str);  
  204.                             out.close();  
  205.                         }  
  206.   
  207.                     } catch (Exception e) {  
  208.                         res = "false";  
  209.                         logger.error(e.getMessage(), e);  
  210.                         response.setContentType("text/html;charset=UTF-8");  
  211.                         PrintWriter out = response.getWriter();  
  212.                         out.println("{'ret':'false','content':'写入错误'}");  
  213.                         out.close();  
  214.                     }  
  215.   
  216.                 }  
  217.   
  218.             }  
  219.         }  
  220.   
  221.     }  
  222.   
  223.     public static void main(String[] args) {  
  224.         System.out.println(UUID.randomUUID().toString().replaceAll("-", ""));  
  225.         System.out.println(DateUtils.simpleDateFormat("yyyyMMdd", new Date()));  
  226.         String aa = "E:/Seller20110928/upload/";  
  227.         File file = new File(aa);  
  228.         if (!file.exists()) {  
  229.             file.mkdirs();  
  230.         }  
  231.     }  
  232. }  

 

读取时：

读取时，也得把编辑框里的内容转换为BASE64Code，convertImgBASE64Code，这样才可正常读取

若不转换，编辑框里显示的是纯文本，图片显示的是路径，不会展示

Java代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. String contentWithBase64Img = HtmlUtil.convertImgBASE64Code(cdoTopic.getStringValue("content"));  
  2. cdoTopic.setStringValue("content",URLEncoder.encode(contentWithBase64Img,"UTF-8"));  

 

JS：

Js代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. <input type="hidden" id="srcContent" name="srcContent" value="${cdoTopic.getStringValue('content')}" />  
  2.   
  3. $(document).ready(function(){  
  4.     var srcContent = $("#srcContent").val();  
  5.     um.addListener("ready", function () {  
  6.         um.execCommand('inserthtml', decodeURIComponent(srcContent.replace(/\+/g, '%20')));  
  7.         var imgArr = $(window.frames["1"].document).find("img");  
  8.         for(var i = 0 ; i < imgArr.length; i++){  
  9.             var imgSrc = $(imgArr[i]).attr("src");  
  10.             var mpImg = new MegaPixImage(imgArr[i]);  
  11.             mpImg.render(imgArr[i], { maxWidth: 150, maxHeight: 150, quality: 0.5, _src: imgSrc });  
  12.         }  
  13.     });  
  14. });  

 工具类：

Java代码   移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
  1. import java.io.IOException;  
  2. import java.net.HttpURLConnection;  
  3. import java.net.URL;  
  4.   
  5. import org.jsoup.Jsoup;  
  6. import org.jsoup.nodes.Document;  
  7. import org.jsoup.nodes.Element;  
  8. import org.jsoup.select.Elements;  
  9. import org.slf4j.Logger;  
  10. import org.slf4j.LoggerFactory;  
  11. import sun.misc.BASE64Encoder;  
  12.   
  13. public class HtmlUtil {  
  14.     private static Logger logger = LoggerFactory.getLogger(HtmlUtil.class);  
  15.   
  16.     public static String convertImgLazyLoad(String bodyFragment){  
  17.         Document doc = Jsoup.parseBodyFragment(bodyFragment);  
  18.         Elements imgs = doc.getElementsByTag("img");  
  19.         for(int i=0; i< imgs.size(); i++){  
  20.             Element img = imgs.get(i);  
  21.             img.addClass("lazy");  
  22.             img.attr("data-original", img.attr("src"));  
  23.             img.attr("src", ProPertiesUtil.getValue("/server.properties", "staticServer") + "/img/loading.gif");  
  24.         }  
  25.         return doc.body().html();  
  26.     }  
  27.   
  28.     public static String convertImgBASE64Code(String bodyFragment){  
  29.         Document doc = Jsoup.parseBodyFragment(bodyFragment);  
  30.         Elements imgs = doc.getElementsByTag("img");  
  31.         for(int i=0; i< imgs.size(); i++){  
  32.             Element img = imgs.get(i);  
  33.             String src =  img.attr("src");  
  34.             String base64Str = "";  
  35.             try{  
  36.                 base64Str = getImageBASE64Code(src);  
  37.             }catch (IOException e){  
  38.                 logger.error(e.getMessage(), e);  
  39.             }  
  40.             img.attr("_src", img.attr("src"));  
  41.             img.attr("src", base64Str);  
  42.         }  
  43.         return doc.body().html();  
  44.     }  
  45.   
  46.     /** 
  47.      * 将图片文件转化为字节数组字符串，并对其进行Base64编码处理 
  48.      * 
  49.      * @param imgUrl 
  50.      * @return 
  51.      * @throws IOException 
  52.      */  
  53.     private static String getImageBASE64Code(String imgUrl) throws IOException {  
  54.         URL url = new URL(imgUrl);  
  55.         HttpURLConnection conn = (java.net.HttpURLConnection) url.openConnection();  
  56.         if (conn.getResponseCode() == 200) {  
  57.             java.io.InputStream is = conn.getInputStream();  
  58.             java.io.ByteArrayOutputStream baos =  
  59.                     new java.io.ByteArrayOutputStream();  
  60.   
  61.             int buffer = 1024;  
  62.             byte[] b = new byte[buffer];  
  63.             int n = 0;  
  64.             while ((n = is.read(b, 0, buffer)) > 0) {  
  65.                 baos.write(b, 0, n);  
  66.             }  
  67. //            String s = new String(baos.toByteArray(), "UTF-8");  
  68.             is.close();  
  69.             baos.close();  
  70.             // 对字节数组Base64编码  
  71.             BASE64Encoder encoder = new BASE64Encoder();  
  72.             return "data:image/jpeg;base64," + encoder.encode(baos.toByteArray());  
  73. //            return encoder.encode(baos.toByteArray());  
  74.         }  
  75.         return "";  
  76.     }  
  77.   
  78.     public static void main(String[] args){  
  79.         String content = "<img src=\"http://img.1more.com/bbs/2015/07/03/14/0ccb5349b8d246f28f64dbf9acd2161f.jpg\" alt=\"\" />gdsahdshsdhdsh<span>asdads";  
  80. //        String content = "//img.1more.com/bbs/2015/07/03/14/0ccb5349b8d246f28f64dbf9acd2161f.jpg\" alt=\"\" />gdsahdshsdhdsh<span>asdads";  
  81.         System.out.println(convertImgLazyLoad(content));  
  82.   
  83.     }  
  84. }  

 

。。。

 

 转载链接

 

  • lrz.zip (29.8 KB)
  • 描述: JS包
  • 下载次数: 16
标签：

相关文章