MUI的图片上传裁切实现

---

本例使用jquery.cropper插件实现，这个插件非常强大支持浏览器和移动端android和ios，同时也提供了图片缩放、移动、选区缩放和移动、图片旋转等，本例选取了几个功能主要实现了选区大小固定（旋转固定的图片大小）、图片移动、图片缩放、图片旋转等，然而这一切强大的是cropper的，我只是个过客，另外集成mui后可拍照上传、相册选择图片上传功能。

运行示例一（显示示例）

运行示例二（选择图片裁切）

运行示例三（确定并保存成功）

服务器端代码说明

注：服务器端我是捡着最简单的实现临时放上去了一个示例，可将自己运行示例提示中的上述地址提示复制出来进行敲地址访问，图片的大小为300X300，页面上设置的。服务端完整代码如下：

package com;

 

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.OutputStream;

import java.io.PrintWriter;

import java.util.UUID;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import com.alibaba.fastjson.JSONObject;

import com.alibaba.fastjson.util.Base64;

import com.frame.base.utils.properties.PropertiesUtils;

import com.frame.base.utils.properties.enums.EnumProperties;

 

@WebServlet("/testaa.servlet")

public class Test extends HttpServlet {

 

   private static final long serialVersionUID = 1L;

 

   @Override

   protected void doGet(HttpServletRequest req, HttpServletResponse resp)

         throws ServletException, IOException {

      String imageBase64 = req.getParameter("imageBase64");

      //将base64的图片编码存储至服务器，并将路径修改至数据库

      String type = "data:image/png;base64,";//前台是以png的格式存储的

      imageBase64 = imageBase64.substring(type.length());

      String realPath = "sysuser" + File.separator + UUID.randomUUID().toString() + ".png";

      JSONObject json = new JSONObject();

      try {

         this.uploadFileByBase64(realPath , imageBase64);

         json.put("result", "success");

         json.put("message", realPath);

      } catch (Exception e) {

         json.put("result", "error");

         json.put("message", "上传图片失败!");

         e.printStackTrace();

      }

      //将参数输出至浏览器

      PrintWriter out = resp.getWriter();

      out.write(json.toJSONString());

      out.flush();

      out.close();

     

   }

 

   @Override

   protected void doPost(HttpServletRequest req, HttpServletResponse resp)

         throws ServletException, IOException {

      this.doGet(req, resp);

   }

 

   public File uploadFileByBase64(String destRealPath , String imageBase64) throws Exception{

      OutputStream out = null;

      try {

         byte bytes[] = Base64.decodeFast(imageBase64);

         //这里是我的获取图片文件服务器的路径，可以是随便一个地址，如d:\\temp\\之类的

         String imageServer = PropertiesUtils.getInstance().getProperty(EnumProperties.APPLICATION, "system.fileupload.information");

         String destFilePath = imageServer + File.separator + destRealPath;

         File destFile = new File(destFilePath);

         if(! destFile.getParentFile().exists()){

            destFile.getParentFile().mkdirs();

         }

         for(int i=0 , lens = bytes.length ; i < lens ; i++){

            if(bytes[i] < 0){

                bytes[i] += 256;

            }

         }

         out = new FileOutputStream(destFile);

         out.write(bytes);

         return destFile;

      } catch (Exception e) {

         throw new Exception(e);

      } finally {

         CloseUtil.close(out);

      }

   }

  

}

完整代码可在CSDN下载，搜索：haiyangyiba 用户。

 点赞

---

 发表评论

---

 评论列表

---