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

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

先说明下我搭建的环境是:springMVC+spring+mybatis ，由于表达能力欠缺。下面直接上代码：

一、jsp页面：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< 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组件引用情况：

?

1 2 3

< 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使用方法：（有两种，先说我使用的，最后在介绍两种方法的不同之处）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<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>

四、后台代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

@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工具类：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

/**       * 截取图片       * @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的官网