登录 
欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬
 服务器本次启动于:23天前 

MUI的图片上传裁切实现

2017-09-10 15:13:45 阅读:()

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

运行示例一(默认显示)

blob.png

运行示例二(选择图片裁切)

blob.png

运行示例三(确定并保存成功)

blob.png

服务器端说明

注:服务器端我是捡着最简单的实现临时放上去了一个示例,可将自己运行示例提示中的上述地址提示复制出来进行敲地址访问,图片的大小为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);

      }

   }

  

}


你可能感兴趣的:
      关键字:import(15)out(8)string(7)imagebase(7)servlet(6)
      互动()
      评论()
      比起点赞,站长更喜欢登录后的评论
      • 0
      • 0
      • 0
      • 0
      • 0