SpringMVC结合Jcrop实现图片裁剪

 更新时间:2016年12月30日 16:31:53   作者:繁华穿越现实  
这篇文章主要介绍了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
      });

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

相关文章

  • Java多线程 乐观锁和CAS机制详细

    Java多线程 乐观锁和CAS机制详细

    这篇文章主要介绍了Java多线程 乐观锁和CAS机制,乐观锁是对于数据冲突保持一种乐观态度,操作数据时不会对操作的数据进行加锁,需要的朋友可以参考下
    2021-10-10
  • SpringBoot读取配置优先级顺序的方法详解

    SpringBoot读取配置优先级顺序的方法详解

    Spring Boot作为一种轻量级的Java应用程序框架,以其开箱即用、快速搭建新项目的特性赢得了广大开发者的青睐,在Spring Boot生态系统中,配置属性可以从各种来源获取,本文将深入探讨Spring Boot加载外部配置属性的优先级规则,需要的朋友可以参考下
    2024-05-05
  • Java实现航空航班管理系统

    Java实现航空航班管理系统

    这篇文章主要为大家详细介绍了Java实现航空航班管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Java Scala之面向对象

    Java Scala之面向对象

    Scala是一门面向对象的语言。在Scala中,一切皆为对象函数是对象,数字也是对象,本文详细介绍了Scala面向对象的原理和介绍,感兴趣的小伙伴可以参考一下
    2023-04-04
  • Spring Boot异常处理静止trace

    Spring Boot异常处理静止trace

    这篇文章主要介绍了Spring Boot异常处理静止trace,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • SpringBoot测试配置属性与web启动环境超详细图解

    SpringBoot测试配置属性与web启动环境超详细图解

    Web开发的核心内容主要包括内嵌的Servlet容器和SpringMVCSpringBoot使用起来非常简洁,大部分配置都有SpringBoot自动装配,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • 浅谈Java中OutOfMemoryError问题产生原因

    浅谈Java中OutOfMemoryError问题产生原因

    本文主要介绍了浅谈Java中OutOfMemoryError问题产生原因,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • springboot做代理分发服务+代理鉴权的实现过程

    springboot做代理分发服务+代理鉴权的实现过程

    这篇文章主要介绍了springboot做代理分发服务+代理鉴权的实现过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • Java实现动态代理的实例代码

    Java实现动态代理的实例代码

    代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息、过滤消息、把消息转发给委托类,以及事后处理消息等,这篇文章主要给大家介绍了关于Java实现动态代理的相关资料,需要的朋友可以参考下
    2021-09-09
  • Spring中的事务管理实例详解

    Spring中的事务管理实例详解

    这篇文章主要介绍了Spring中的事务管理,以实例形式详细分析了事务的概念与特性以及事物管理的具体用法,需要的朋友可以参考下
    2014-11-11

最新评论