SpringMVC结合Jcrop实现图片裁剪
发布时间:2020-12-14 14:34:07 所属栏目:Java 来源:网络整理
导读:本文实例为大家分享了SpringMVC结合Jcrop实现图片裁剪的具体代码,供大家参考,具体内容如下 一、jsp页面: form name="form" action="%=request.getContextPath()%/UploadDemo/uploadHeadImage" class="form-horizontal" method="post" enctype="multipart/
本文实例为大家分享了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,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-使用hashCode返回HashMap的巨大Integer ID
- java – Wicket DropDownChoice无法正常使用PropertyModels
- 关于spring中aop的注解实现方法实例详解
- java.text.SimpleDateFormat中的奇怪的行为,期望yyyyMMdd给
- java – 只允许用户输入正整数(没有小数或字符串)?
- java – 在什么条件下两个不同的对象可能具有相同的hashcod
- java – 如何使用restfb检索facebook auth代码
- java – Hibernate:无法访问TransactionManager或UserTran
- Java ScrollPane重叠内容
- P3067 [USACO12OPEN]平衡的奶牛群(折半暴搜)