SpringMVC结合Jcrop实现头像上传功能！头像上传以及之前预览再以及剪裁

项目中有上传头像功能,需要对上传的图片进行截取，原来使用的是Flash插件上传，但是不可控制。最后看到这个Jcrop组件还不错，就尝试用了一下感觉还不错的！这里分享给大家

先说明下我搭建的环境是:springMVC+spring+mybatis。下面直接上代码：

一、jsp页面：

<form name="form" action="<%=request.getContextPath()%>/UploadDemo/uploadHeadImage" class="form-horizontal"        method="post" enctype="multipart/form-data">      <div class="modal-body text-center">          <div class="zxx_main_con">              <div class="zxx_test_list">                  <input class="photo-file" type="file" name="imgFile" id="fcupload" onchange="readURL(this);"/>                  <img alt="" src="" id="cutimg"/>                  <input type="hidden" id="x" name="x"/>                  <input type="hidden" id="y" name="y"/>                  <input type="hidden" id="w" name="w"/>                  <input type="hidden" id="h" name="h"/>              </div>          </div>      </div>            <div class="modal-footer">          <button id="submit" onclick="">上传</button>      </div>  </form>

二、jcrop组件引用情况：

    <link rel="stylesheet" href="<c:url value="/resources/uploadPlugin/css/jquery.Jcrop.css"/>" type="text/css"></link>      <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery-1.8.3.js"/>"></script>      <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery.Jcrop.js"/>"></script>

三、jcrop使用方法：（有两种，先说我使用的，最后在介绍两种方法的不同之处）

<script type="text/javascript">        //定义一个全局api，这样操作起来比较灵活          var api = null;          function readURL(input) {              if (input.files && input.files[0]) {                  var reader = new FileReader();                  reader.readAsDataURL(input.files[0]);                  reader.onload = function (e) {                      $('#cutimg').removeAttr('src');                      $('#cutimg').attr('src', e.target.result);                      api = $.Jcrop('#cutimg', {                          setSelect: [ 20, 20, 200, 200 ],                          aspectRatio: 1,                          onSelect: updateCoords                      });                  };                  if (api != undefined) {                      api.destroy();                  }              }              function updateCoords(obj) {                  $("#x").val(obj.x);                  $("#y").val(obj.y);                  $("#w").val(obj.w);                  $("#h").val(obj.h);              };          }      </script>

四、后台代码：

    @RequestMapping(value = "/uploadHeadImage")      public String uploadHeadImage(              HttpServletRequest request,              @RequestParam(value = "x") String x,              @RequestParam(value = "y") String y,              @RequestParam(value = "h") String h,              @RequestParam(value = "w") String w,              @RequestParam(value = "imgFile") MultipartFile imageFile      ) throws Exception{          System.out.println("==========Start=============");          String realPath = request.getSession().getServletContext().getRealPath("/");          String resourcePath = "resources/uploadImages/";          if(imageFile!=null){              if(FileUploadUtil.allowUpload(imageFile.getContentType())){                  String fileName = FileUploadUtil.rename(imageFile.getOriginalFilename());                  int end = fileName.lastIndexOf(".");                  String saveName = fileName.substring(0,end);                  File dir = new File(realPath + resourcePath);                  if(!dir.exists()){                      dir.mkdirs();                  }                  File file = new File(dir,saveName+"_src.jpg");                  imageFile.transferTo(file);                  String srcImagePath = realPath + resourcePath + saveName;                  int imageX = Integer.parseInt(x);                  int imageY = Integer.parseInt(y);                  int imageH = Integer.parseInt(h);                  int imageW = Integer.parseInt(w);                  //这里开始截取操作                  System.out.println("==========imageCutStart=============");                  ImageCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);                  System.out.println("==========imageCutEnd=============");              }          }          return "user/uploadImg/test";      }

五、ImageCut.java工具类：

/**       * 截取图片       * @param srcImageFile  原图片地址       * @param x    截取时的x坐标       * @param y    截取时的y坐标       * @param desWidth   截取的宽度       * @param desHeight   截取的高度       */      public static void imgCut(String srcImageFile, int x, int y, int desWidth,                                int desHeight) {          try {              Image img;              ImageFilter cropFilter;              BufferedImage bi = ImageIO.read(new File(srcImageFile+"_src.jpg"));              int srcWidth = bi.getWidth();              int srcHeight = bi.getHeight();              if (srcWidth >= desWidth && srcHeight >= desHeight) {                  Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);                  cropFilter = new CropImageFilter(x, y, desWidth, desHeight);                  img = Toolkit.getDefaultToolkit().createImage(                          new FilteredImageSource(image.getSource(), cropFilter));                  BufferedImage tag = new BufferedImage(desWidth, desHeight,                          BufferedImage.TYPE_INT_RGB);                  Graphics g = tag.getGraphics();                  g.drawImage(img, 0, 0, null);                  g.dispose();                  //输出文件                  ImageIO.write(tag, "JPEG", new File(srcImageFile+"_cut.jpg"));              }          } catch (Exception e) {              e.printStackTrace();          }      }

六、jcrop的两种使用方式：

1、jQuery('#cropbox').Jcrop({
                  onChange: showCoords,
                  onSelect: showCoords
           });

2、var api = $.Jcrop('#cropbox',{
                  onChange: showPreview,
                  onSelect: showPreview,
                  aspectRatio: 1
           });

这里推荐大家使用第二种方式，将Jcrop生成的对象赋给一个全局变量，这样操作起来更灵活，如调用api.destroy();方法可以销毁 Jcorp，这样我们在实际使用中会更灵活一些，因为直接改变要裁剪图片的路径会导致Jcorp的出错，如果想要变更编辑的图片我们需要销毁Jcorp， 变更图片的属性后再次为图片附加Jcorp。

参看：1、 jQuery Jcrop 图像裁剪  2、Jcrop的官网