SpringMVC结合Jcrop实现图片裁剪

本文实例为大家分享了SpringMVC结合Jcrop实现图片裁剪的具体代码，供大家参考，具体内容如下

一、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
      });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。