JAVA使用Jcrop做图片裁剪上传

来源：互联网发布：软件科技成果鉴定证书编辑：程序博客网时间：2024/05/22 07:57

首先需要引用三个JS文件

<link rel="stylesheet" href="Jcrop/jquery.Jcrop.css"><script src="Jcrop/jquery-2.2.3.js"></script><script src="Jcrop/jquery.Jcrop.js"></script>

然后页面上下面的JS代码是在选择图片的时候通过AJAX上传图片，这里需要注意的是Jquery必须使用2.0以上的版本，否则后台就收不到文件

<script type="text/javascript">//图片上传的onchange事件，用于上传并回显图片function uploadImg() {       var formData = new FormData($( "#uploadForm" )[0]);      $.ajax({            url: '${pageContext.request.contextPath}/uploadImag.do' ,            type: 'POST',            data: formData,            async: false,            cache: false,            contentType: false,            processData: false,            success: function (returndata) {           var json=eval("("+returndata+")");          var cropboxdiv=$('#cropboxdiv');//图片回显区域          $('#cropboxdiv').empty();          $("<img id='cropbox' src='"+json.path+"/"+json.fileName+"'>").appendTo(cropboxdiv);          $('#imgPath').val(json.path+"/"+json.fileName);          $('#srcPath').val(json.path);      $('#fileName').val(json.fileName);          $('#cropbox').Jcrop({//初始化Jcrop图片裁剪器      maxSize : [ 150, 170 ],      minSize: [135,135],      onSelect : function(c){//图片选择事件      $('#x').val(c.x);      $('#y').val(c.y);      $('#w').val(c.w);      $('#h').val(c.h);      }      });          }      });  }//图片裁剪区域选好之后，交给java后台进行裁剪function cutImg(){$.ajax({    type:"post", url:"${pageContext.request.contextPath}/cutImg.do", cache:false, data:{ x:$('#x').val(), y:$('#y').val(), w:$('#w').val(), h:$('#h').val(), srcPath:$('#srcPath').val(), fileName:$('#fileName').val() },success:function(r){$('#imgPath').val($('#srcPath').val()+"/"+$('#fileName').val());}});}</script>

<body><div id="cropboxdiv"><img id="cropbox" src=""></div><form id= "uploadForm">  <table><tr><a href="javascript:void(0);" class="file">选择文件    <input type="file" name="file" onchange="uploadImg()"></a></tr></table></form><input type="hidden" id="x" /><input type="hidden" id="y" /><input type="hidden" id="w" /> <input type="hidden" id="h" /> <input type="hidden" id="imgPath" /> <input type="hidden" id="srcPath" /> <input type="hidden" id="fileName" /> </body>

下面是后台接收前台onchange事件上传的图片，最后将图片的相对路径和文件名封装到一个DTO里面方便传输数据

@RequestMapping("uploadImag")public void uploadImag(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletResponse response, HttpServletRequest request) throws Exception{SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");String date = sdf.format(new Date());String path = request.getSession().getServletContext().getRealPath("img" + File.separator + date);String[] postfixs = file.getOriginalFilename().split("\\.");String postfix = postfixs[postfixs.length - 1];String fileName = new Date().getTime() + "." + postfix;File targetFile = new File(path, fileName);if (!targetFile.exists()) {targetFile.mkdirs();}try {file.transferTo(targetFile);} catch (Exception e) {e.printStackTrace();}imgCutPathDto icp=new imgCutPathDto();icp.setFileName(fileName);icp.setPath(Zealot.SSOIMAGPATH + File.separator+date);WebUtil.print(response,Json.toJson(icp));}

这时候原始图片已经回显到了页面，在调用前台的裁剪方法是会访问后台的一个裁剪图片方法，如下

@RequestMapping("cutImg")public void cutImg(HttpServletResponse response, HttpServletRequest request,String x,String y,String w,String h,String srcPath,String fileName){int x1=Integer.parseInt(x);int y1=Integer.parseInt(y);int w1=Integer.parseInt(w);int h1=Integer.parseInt(h);String path = request.getSession().getServletContext().getRealPath("/");CutImg.cutPic(path+srcPath+File.separator+fileName,path+srcPath, x1, y1, w1, h1,fileName);WebUtil.print(response,"yes");}

具体裁剪工具类，如下

import java.awt.Rectangle;import java.awt.image.BufferedImage;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;import java.util.Date;import java.util.Iterator;import javax.imageio.ImageIO;import javax.imageio.ImageReadParam;import javax.imageio.ImageReader;import javax.imageio.stream.ImageInputStream;import org.apache.commons.io.FilenameUtils;public class CutImg {private static final String JPG_HEX = "ff";private static final String PNG_HEX = "89";private static final String JPG_EXT = "jpg";private static final String PNG_EXT = "png";public static String getFileExt(String filePath) {    FileInputStream fis = null;    String extension = FilenameUtils.getExtension(filePath);    try {        fis = new FileInputStream(new File(filePath));        byte[] bs = new byte[1];        fis.read(bs);        String type = Integer.toHexString(bs[0]&0xFF);        if(JPG_HEX.equals(type))            extension = JPG_EXT;        if(PNG_HEX.equals(type))            extension = PNG_EXT;    } catch (FileNotFoundException e) {        e.printStackTrace();    } catch (IOException e) {        e.printStackTrace();    } finally {        try {            if(fis != null)                fis.close();        } catch (IOException e) {            e.printStackTrace();        }    }    return extension;} public static boolean cutPic(String srcFile, String outFile, int x, int y,              int width, int height,String fileName) {          FileInputStream is = null;          ImageInputStream iis = null;          try {              // 如果源图片不存在              if (!new File(srcFile).exists()) {                  return false;              }                // 读取图片文件              is = new FileInputStream(srcFile);                                                   // 获取文件格式                          String ext =getFileExt(srcFile);            //String ext = fileName.substring(fileName.lastIndexOf(".") + 1);                // ImageReader声称能够解码指定格式              Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(ext);              ImageReader reader = it.next();                // 获取图片流              iis = ImageIO.createImageInputStream(is);                // 输入源中的图像将只按顺序读取              reader.setInput(iis, true);                // 描述如何对流进行解码              ImageReadParam param = reader.getDefaultReadParam();                // 图片裁剪区域              Rectangle rect = new Rectangle(x, y, width, height);                // 提供一个 BufferedImage，将其用作解码像素数据的目标              param.setSourceRegion(rect);                // 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象              BufferedImage bi = reader.read(0, param);                                          File tempOutFile = new File(outFile, fileName);    File tempOutFileDir = new File(outFile);    if (!tempOutFileDir.exists()) {    tempOutFileDir.mkdirs();    }    tempOutFile.createNewFile();            ImageIO.write(bi, ext, tempOutFile);              return true;          } catch (Exception e) {              e.printStackTrace();              return false;          } finally {              try {                  if (is != null) {                      is.close();                  }                  if (iis != null) {                      iis.close();                  }              } catch (IOException e) {                  e.printStackTrace();                  return false;              }          }      }  }

如此图片裁剪便完成了，原始的图片我在这儿被裁剪后的图片覆盖了，根据之前的上传路径就可以回显裁剪后的图片了

4 0