SpringMVC는 jcrop과 결합하여 이미지 자르기를 달성했습니다

이 기사는 Jcrop과 결합 된 SpringMVC의 특정 코드를 공유하여 참조의 이미지 자르기를 실현합니다. 특정 내용은 다음과 같습니다

1. JSP 페이지 :

 <form name = "form"action = "<%= request.getContextPath ()%>/uploaddemo/uploadHeadImage"메소드 = "post"encType = "multipart/form-data"> <div> <div> <div> <입력 유형 = "file"name = "imgfile"id = "fcupload"readurl (this) "" " id = "cutimg"/> <input type = "hidden"id = "x"name = "x"/> <입력 유형 = "hidden"id = "y"name = "y"/> <입력 유형 = "hidden"id = "w"name = "w"/> <input type = "hidden"id = "hame ="h. id = "제출"onclick = ""> 업로드 </button> </div> </form>

2. 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>

3. jcrop을 사용하는 방법

 <script type = "text/javaScript"> // Global API를 정의하는데, 이는 var api = null을 작동하는 것이 더 유연합니다. function readUrl (입력) {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 (); }} 함수 updateCoords (obj) {$ ( "#x"). val (obj.x); $ ( "#y"). val (obj.y); $ ( "#w"). val (obj.w); $ ( "#h"). val (obj.h); }; } </스크립트>

4. 배경 코드 :

 @requestmapping (value = "/uploadHeadImage") public String uploadHeadHeadImage (httpservletRequest request, @requestParam (value = "x") String x, @requestParam (value = "y") String y, @requestparam (value = "h") String h, @requestparam (value = ")) string w, @requesparam (value =)")). MultipartFile ImageFile) 예외 {System.out.println ( "=============================================================================================================================================== "resources/uploadiMages (inmatefile! = null) {fileUploadUtil.AllowUpload (string filename = fileUploadUtil.Rename) filename.substring (0, end); integer.parseint (x); 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"; }

5. imagecut.java 도구 클래스 :

 / *** 차단 된 이미지* @param srcimagefile 원본 이미지 주소* @param x x 가로 채기 동안* @param y y 좌표* @param deswidth intercepted width* @param desheight intercepted height*/ public static void imgcut (문자열 srcimagefile, int x, int -deswidth, int in int gight, int in int gight). IMG; ImageFilter Cropfilter; bufferedImage bi = imageio.Read (새 파일 (srcImageFile+"_ src.jpg")); int srcwidth = bi.getWidth (); int srcheight = bi.getheight (); if (srcwidth> = deswidth && srcheight> = desheight) {im Cropfilter = 새로운 CropimageFilter (x, y, deswidth, desheight); img = toolkit.getDefaultToolKit (). CreateImage (new FiltersImagesSource (image.getSource (), Cropfilter); bufferedImage tag = new bufferedImage (deswidth, desheight, bufferedImage.type_int_rgb); 그래픽 g = tag.getGraphics (); G.DrawImage (IMG, 0, 0, NULL); g.dispose (); // output file imageio.write (tag, "jpeg", 새 파일 (srcimagefile+"_ cut.jpg")); }} catch (예외 e) {e.printstacktrace (); }}

6. Jcrop 사용 방법 :

1.

 jQuery ( '#cropbox'). jcrop ({onchange : showcoords, onselect : showcoords});

2.

 var api = $ .jcrop ( '#cropbox', {onchange : showpreview, onselect : showpreview, aspectratio : 1});

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.