欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SpringMVC结合Jcrop实现图片裁剪

程序员文章站 2024-03-08 18:48:22
本文实例为大家分享了springmvc结合jcrop实现图片裁剪的具体代码,供大家参考,具体内容如下 一、jsp页面:

本文实例为大家分享了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
      });

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