首页 > 编程 > Java > 正文

SpringMVC结合Jcrop实现图片裁剪

2019-11-26 13:21:36
字体:
来源:转载
供稿:网友

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表