HTML
<#-ImgareAceLect 플러그인을 사용하여 아바타 테스트 페이지를 업로드하십시오
마지막 으로이 플러그인을 업로드하여 참조를 학습했습니다
<link rel = "Stylesheet"type = "text/css"href = "$ {frontres}/imgareasel/css/imgareasel-animated.css"/> <link rel = "Stylesheet"type = "text/css"href = "$ {frontres} /imgareasel/csss/css/css/css/ type = "text/javaScript"src = "$ {frontres}/imgareasel/jquery-1.4.2.min.js"> </script> <script type = "text/javaScript"src = "$ {frontres}/imgareaselct/jquery.imgareaselect.pack.js"</script> <script> "" "". src = "$ {frontres}/imgareaselect/ajaxfileupload.js"> </script> <cript> 함수 addfile (obj) {//document.getElementById('img').src = path; $ .ajaxfileUpload ({url : '$ {huluurl}/trainer/upload/ajaxupload', // 파일 업로드에 사용되는 서버 측 요청 주소 : false, // security 프로토콜이 필요한지 여부에 관계없이 falseelementID로 설정되어 있습니다. 성공 : // 서버는 처리 함수 var infoArray = Eval ( "("+data+")에 성공적으로 응답합니다. 서버가 실패했습니다. 나중에 시도하십시오! '); } function preview (img, selection) {if (! selection.width ||! selection.height) return; // 미리보기 var scalex = 100 /selection.width; var scaley = 100 / selection.Height; // var imgx = document.getElementById ( "photo"). style.width; var imgx = parseint ($ ( "#photo"). css ( "width"). split ( "px") [0]); var imgy = parseint ($ ( "#photo"). css ( "height"). split ( "px") [0]); console.debug (imgx+"===="+imgy); $ ( '#preview img'). css ({width : math.round (scalex * imgx), 높이 : math.round (scaley * imgy), marginleft : -math.round (scalex * selection.x1), math.round (scaley * selection.y1)); $ ( '#x1'). val (selection.x1); $ ( '#y1'). val (selection.y1); $ ( '#x2'). val (selection.x2); $ ( '#y2'). val (selection.y2); $ ( '#w'). val (selection.width); $ ( '#h'). val (selection.height); // 백엔드 데이터 $ ( '#x1s'). val (selection.x1); $ ( '#y1s'). val (selection.y1); $ ( '#x2s'). val (selection.x2); $ ( '#y2s'). val (selection.y2); $ ( '#imgx'). val (parseint (imgx)); // 원래 너비 너비 $ ( '#imgy'). val (parseint (imgy)); // 원래 높이} $ (함수 (selection) {var imgx = $ ( "#photo"). css ( "width"). split ( "px") if (imgx> imgy) {ares = imgx = $ ( '#photo') IAS.SETOPTIONS ({show : true}); ares; var scaley /ares ( '#preview img'). $ ( '#y1s'). Val ( '#x2s'). </script> <div style = "margin-top : 20px;"> <div> <div> <div> <div> <h4 style = "font-weight : 600; float : left"> 사진 업로드 </h4> </div> <div> <div style = "margin-top : 15px"> <div> <div style = "float"> <div "> rel bultion; 오버 플로 : 숨겨진; 배경색 : #8dc21f; color : #ffffff; "> <span>+사진 추가 </span> <입력 id ="photofile "type"name "="photofile "onchange ="addfile (this); 스타일 = "높이 : 34px; 위치 : 절대; 오른쪽 : 0px; 상단 : 0px; 마진 : 0px; 패딩 : 0px; 커서 : 포인터; 불투명도; 불투명도 : 0;"> </div> </div> <span style = "float : left; margin-leys : #888888"> <ul> <ul> <li> </li>> <li>> <li> <li> <li> 그리고 gif, 크기는 5m를 초과하지 않습니다 </li> </ul> </span> </div> </div> <div> <div> <img src = "/images/$ {(trainer.photo)!" "}"img "> </div> </div> </div> </div> <양식 acture ="$}/uplop}/uppot} 메소드 = "post"enctarpe = "multipart /form-data"> <input type = "text"id = "x1s"name = "x1s"value = "-"-" /> <입력 유형 ="텍스트 "id ="y1s "name ="y1s "value ="-" /> <input type ="x2s "name ="x2s "value"-" />>>" id = "y2s"name = "y2s"value = "-" /> <입력 유형 = "text"id = "imgx"name = "imgx"value = "-"-" /> <input type ="text "id ="imgy "name ="imgy "value ="-" /> <div style ="margin-top : 15px : 80px "> <div> <div> <div> <div>. type = "button"id = "chongxinshangchuan"> reupload </button </div> <div> <버튼 유형 = "제출"id = "baocun"> 저장 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> id = "main"> <div> <div> <div style = "float : 왼쪽; 너비 : 50%; "> <p> 이미지를 클릭하고 드래그하여 영역을 선택하십시오. 텍스트 정렬 : 센터; 오버플로 : 숨겨진; Z- 인덱스 : 1001; 너비 : 300px; 높이 : 300px; 위치 : 상대; 왼쪽 : 50%; 상단 : 50%; 마진 왼쪽 : -150px; 마진 -탑 : -150px; "> <img id ="photo "src ="/images/$ {(트레이너.photo)! ""} "style ="max-height : 300px; max-width : 300px; "/> </div> </div> </div> </div> </div> <div style ="float : 왼쪽; 너비 : 50%; "> <p style ="font-size : font-weight : bold; Padding-Left : 0.1em; "> 선택 미리보기 </p> <div> <div id ="preview "> <img src ="/images/$ {trainer.photo!} "/> </div> </div> <table> <trad> <Th colspan ="2 "style ="font-size : 110%; 글꼴 중량 : 대담한; 텍스트 정렬 : 왼쪽; 왼쪽 패딩 : 0.1em; "> 좌표 </th> <th colspan ="2 "style ="font-size : 110%; 글꼴 중량 : 대담한; 텍스트 정렬 : 왼쪽; Padding-Left : 0.1em; "> 치수 </th> </tr> </thead> <tbody> <td> <td> x <b> x <b> x> 1 </sub> : </b> </td> <td> <입력 유형 ="텍스트 "id ="x1 "value ="-"/> </td> <td> <b width : </b> b> b> b> b> </b> type = "text"value = "-"id = "w"/> </td> </tr> <td> <td> <b> y <b> y <b> y <b> y <b> </sub> : </b> </td> <td> <입력 유형 = "Id ="y1 "value ="-"/> </td> <td> <b> </b> <td> <td> <td> <td> <td> id = "h"value = "-"/> </td> </tr> <tr> <td> <b> x <sub> 2 </sub> : </b> </b> </td> <td> <입력 유형 = "텍스트"id = "x2"value = "-"/> </td> <td> </td> <b> y </sub> 2 </sub> : </b> </td> <td> </td> </td> <td> <b> y <sub> 2 </sub> : </b> </td> <td> <입력 유형 = "text"id = "y2"value = "-"/> </td> <td> </td> <td> </td> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>자바
// 이미지를 보여주는 서버 서버에서 가상 경로 (tomcat)가 필요합니다 .xml <context debug = "0"docbase = "g :/image"path = "/images"Reloadable = "true"/> 데이터를 ECO [Java] Code Fragments에 도출 한 코드에서의 Code (CAN) */@RERTURIN */requestrmating에서 도출 된 코드의 일반적인 사본보기 코드 조각을 ECO [Java]에 반영합니다. "touploadphoto", method = requestmethod.get) public modelandview touploadtest () {modelandView mav = leftMenu ( "/trainer/upload/uploadphoto"); // 트레이너 트레이너 = null; try {long userId = frontshiroutil.getUserId (); if (null! = userId) {Trainer = TrainerRepo.findone (userId); TrainerDBSVC. UPDATELASTLOGINTIME (userID); }} catch (예외 e) {e.printstacktrace (); } mav.addoBject ( "트레이너", 트레이너); 반환 mav; } // 로컬 새로 고침 업로드 이미지 @requestmapping ( "/ajaxupload") public @responsebody ajaxresult ajaxupload (multiparthttpservletrequest request) {트레이너 트레이너 = 새로운 트레이너 (); // 첫 번째 이미지를 가져옵니다 (프론트 데스크 이름에 따라 업로드 된 파일 가져 오기) multipartFile 파일 = request.getFile ( "photofile"); if (file.getsize ()! = 0) {// 파일 이름 가져옵니다 : String filename = file.getoriginalFilename (); 문자열 시간대 = null; if (null! = filename &&! filename.equals ( "")) {String imgtype = filename.substring (filename.lastindexof ( ".")); // 경로를 가져옵니다. 문자열 ctxpath = "e :/rudongimage/photo/"; // 파일 생성 파일 dirpath = 새 파일 (ctxpath); if (! dirpath.exists ()) {dirpath.mkdirs (); } // 파일 이름 날짜 날짜 = 새 날짜 ()로 시간을 내십시오. simpledateformat sdformat = new simpledateformat ( "yyyymmddhhmmss"); // 24 시간 문자열 lgtime = sdformat.format (date); 시간표 = lgtime + imgtype; file uploadfile = 새 파일 (ctxpath + timetype); try {filecopyutils.copy (file.getBytes (), uploadfile); } catch (ioexception e) {e.printstacktrace (); }} String HeadphotoPath = "Photo/" + Timetype; Trainer.Setphoto (Headphotopath); } try {// userId long userId = frontshiroutil.getUserId ()를 기반으로 트레이너를 쿼리합니다. if (null! = userId) {Trainer.setUserId (userId); // 트레이너 Avatar TrainerDBSVC.updatetrainerphoto (트레이너)를 업데이트합니다. }} catch (예외 e) {e.printstacktrace (); } return ajaxresult.createsuccess (트레이너); // <span style = "font-family : arial, helvetica, sans-serif;"> ajaxresult는 수정 될 수 있습니다 </span>}/** * intercept 영역 업로드 이미지 테스트 * * @requestmapping (value = uploadPhotest ", method = requestMethod.post) UploTPERTEST (multipartheTROTEST) @requestparam ( "x1s") 정수 x1, @requestparam ( "y1s") 정수 y1, @requestparam ( "x2s") 정수 x2, @requestparam ( "y2s") integer y2, @requestparam ( "imgx") 정수 imgwidth, @requestparam (imgigh imgger imgger imggwidth {ModelAndView mav = leftMenu ( "리디렉션 :/트레이너/업로드/touploadphoto"); 트레이너 트레이너 = null; 시도 {// userId long userId = frontshiroutil.getUserId ()를 기반으로 트레이너를 쿼리하십시오. if (null! = userId) {Trainer = TrainerRepo.findone (userId); }} catch (예외 e) {e.printstacktrace (); } file uploadfile = 새 파일 ( "e :/rudongimage/" + trainer.getphoto ()); 입력 스트림은 = null입니다. BufferedImage src = null; int w = -1; int h = -1; try {is = new FileInputStream (uploadFile); src = javax.imageio.imageio.read (is); w = src.getWidth (null); // 소스 이미지 너비를 가져옵니다. h = src.getheight (null); // 소스 그래프 높이 IS.close ()를 가져옵니다. } catch (예외 e) {e.printstacktrace (); } 정수 l = 0; // 작은 가장자리를 기본으로 사용합니다 (원본 이미지 크기) if (w <h) {l = w; } else {l = h; } // 작은 가장자리를 기본 (썸네일 크기) 정수 L2 = 0으로 사용합니다. if (imgwidth <imgheight) {l2 = imgwidth; } else {l2 = imgeight; } 정수 x = (x1 * l)/ l2; // 시작점 x 정수 y = (y1 * l)/ l2; // 시작점 y 정수 xs = (x2 * l)/ l2; // 종말점 x 대각선 위치 정수 ys = (y2 * l)/ l2; // 엔드 포인트 y 디지니안 위치 이미지 이미지 (new imageUlipil); // 가로 채기 파일 이름 문자열 photoname = ""; imageUtil.cutimage (uploadfile, "e :/rudongimage/photo/", x, y, xs -x, ys -y); 문자열 Headphotopath = "Photo/" + Photoname; Trainer.Setphoto (Headphotopath); // 트레이너의 Avatar TrainerDBSVC.updateTrainerphoto (트레이너)를 업데이트합니다. 반환 mav; }도구
import java.awt.color; java.awt.graphics 가져 오기; import java.awt.image; import java.awt.rectangle; java.awt.image.bufferedimage import; import java.io.file; import java.io.fileInputStream; import java.io.filenotfoundException; import java.io.ioexception; import java.io.inputstream; import java.io.outputStream; import java.util.arrays; import java.util.iterator; import javax.imageio.imageio; import javax.imageio.imagereadparam; import javax.imageio.imagereader; import javax.imageio.stream.imageinputstream; import org.slf4j.logger; org.slf4j.loggerfactory; / *** 이미지 인터셉터 도구 클래스*/ public class imageUtil {private logger log = loggerfactory.getLogger (getClass ()); 개인 정적 문자열 default_thumb_prevfix = "thumb_"; 개인 정적 문자열 default_cut_prevfix = "cut_"; 개인 정적 부울 DEFAULT_FORCE = FALSE; /*** <p> 제목 : Cutimage </p>* <p> 설명 : 원본 이미지 및 작물 크기를 기반으로 한 로컬 사진을 가로 채 웁니다 </p>* @param source image image* @param 출력 이미지 출력 스트림* @param rects are are eblice void cutimage (파일 srcimg, 출력) if (srcimg.exists ()) {java.io.fileInputStream fis = null; imageInputStream iis = null; try {fis = new FileInputStream (srcimg); // imageio는 이미지 유형을 지원합니다 : [BMP, BMP, JPG, JPG, WBMP, JPEG, PNG, PNG, JPEG, WBMP, GIF, GIF] String intine = arrays.tostring (imageio.getReaderFormatNames ()). 교체 ( "]", "; 문자열 접미사 = null; // 이미지 접미사를 가져옵니다 if (srcimg.getName (). indexof ( ".")> -1) {wiffix = srcimg.getname (). substring (srcimg.getname (). lastIndexof ( ".") + 1); } // 유형 및 이미지 접미사는 모두 소문자이며, 접미사가 합법적인지 여부를 결정합니다 (wiffix == null || tipe.tolowercase (). indexof (wiffix.tolowercase () + ",") <0) {log.info ( "미안, 이미지 접미사는 불법입니다. 반품 ; } // fileInputStream 변환 imageInputStream iis = imageio.createImageInputStream (fis); // 이미지 유형에 따라이 유형의 imageReader get imageEreader reader = imageio.getImageReadersBySuffix (접미사) .next (); reader.setInput (iis, true); imageEadparam param = reader.getDefaultReadParam (); param.setsourceregion (rect); BufferedImage bi = reader.Read (0, param); imageio.write (bi, 접미사, 출력); } catch (filenotfoundException e) {e.printstacktrace (); } catch (ioexception e) {e.printstacktrace (); } 마침내 {try {if (fis! = null) fis.close (); if (iis! = null) iis.close (); if (output! = null) output.close (); } catch (ioexception e) {e.printstacktrace (); }}}} else {log.info ( "SRC 이미지는 존재하지 않습니다."); }} public void cutimage (파일 srcimg, 출력 스트림 출력, int x, int y, int 너비, int 높이) {cutimage (srcimg, 출력, new java.awt.rectangle (x, y, 너비, 높이)); } public void cutimage (파일 srcimg, string destimgpath, java.awt.rectangle rect) {file destimg = new File (destimgpath); if (destimg.exists ()) {String p = destimg.getPath (); try {if (! destimg.isdirectory ()) p = destimg.getParent (); if (! p.endswith (file.separator)) p = p + file.separator; CUTIMAGE (srcimg, new java.io.fileoutputStream (p + default_cut_prevfix + "_" + new java.util.date (). gettime () + "_" + srcimg.getname ()), rect); } catch (filenotfoundException e) {log.info ( "데스트 이미지가 존재하지 않습니다."); }} else log.info ( "DEST 이미지 폴더가 존재하지 않습니다."); } public void cutimage (파일 srcimg, string destimg, int x, int y, int width, int height) {cutimage (srcimg, destimg, new java.awt.rectangle (x, y, 너비, 높이)); } public void cutimage (String srcimg, string destimg, int x, int y, int width, int height) {cutimage (새 파일 (srcimg), destimg, new java.awt.rectangle (x, y, 너비, 높이)); }/*** <p> 제목 : Thumbnailimage </p>* <p> 설명 : 이미지 경로를 기반으로 썸네일 생성 </p>* @param imagepath 원본 이미지 경로* @param w 썸네일 너비* @param h 썸네일 높이* @param prevfix는 썸네일의 접두사를 생성 할 것입니다. 생성) */ public void humlnailimage (파일 srcimg, outputStream 출력, int w, int h, string prevfix, boolean force) {if (srcimg.exists ()) {// imageio 지원 이미지 유형 : [BMP, BMP, JPG, JPG, WBMP, JPEG, PNG, JPEG, PNG, JPEG, JPEG. gif, gif] 문자열 type = arrays.toString (imageio.getReaderFormatNames ()). 대체 ( "]", ","); 문자열 접미사 = null; // 이미지 접미사를 가져옵니다 if (srcimg.getName (). indexof ( ".")> -1) {wiffix = srcimg.getname (). substring (srcimg.getname (). lastIndexof ( ".") + 1); } // 유형 및 이미지 접미사는 모두 소문자이며, 접미사가 합법적인지 여부를 결정합니다 (wiffix == null || tipe.tolowercase (). indexof (wiffix.tolowercase () + ",") <0) {log.info ( "미안, 이미지 접미사는 불법입니다. 반품 ; } log.info ( "대상 이미지의 크기, 너비 : {}, 높이 : {}.", w, h); image img = imageio.read (srcimg); // 원본 이미지와 필요한 썸네일 스케일을 기반으로 가장 적합한 썸네일 스케일을 찾으십시오. if (! force) {int width = img.getWidth (null); int height = img.getheight (null); if ((너비*1.0)/w <(높이*1.0)/h) {if (width> w) {h = integer.parseint (new java.text.decimalformat ( "0"). 형식 (높이*w/(너비*1.0))); log.info ( "이미지의 높이 변경, 너비 : {}, 높이 : {}.", w, h); }} else {if (height> h) {w = integer.parseint (new java.text.decimalformat ( "0"). 형식 (width * h/(높이 * 1.0)); log.info ( "이미지의 너비 변경, 너비, {}, geight : {}, h); h, the graphics (graphics. system.out.println ( "썸네일 이미지 생성"}} else {Systr void humbnailmage (srcimg, int h, string prevfix, boolean); if (! srcimg.isdirectory ()) p = srcimg.getparent (); (filenotfoundException e) {log.info ( "데스트 이미지가 존재하지 않습니다."+e); }} public void humlnailimage (String imagePath, int w, int h, String prevfix, boolean force) {file srcimg = new File (imagePath); Thumbnailimage (srcimg, w, h, prevfix, force); } public void humbnailimage (String imagePath, int w, int h, boolean force) {Thumbnailimage (ImagePath, w, h, default_thumb_prevfix, default_force); } public void humbnailimage (String imagePath, int w, int h) {Thumbnailimage (imagePath, w, h, default_force); } public void readusingImagerEader (문자열 src, string dest, int w, int h) 예외 {// 이미지 reader iterator readers를 얻습니다. ImageReader Reader = (imageReader) readers.next (); // 이미지 획득을 가져옵니다. inputStream 소스 = 새 FileInputStream (SRC); ImageInputStream iis = imageio.createImageInputStream (소스); reader.setInput (iis, true); // 이미지 매개 변수 imageEreadParam param = reader.getDefaultReadParam (); // 100, 200은 왼쪽 상단의 시작 위치, 300은 300의 너비, 100에서 300, 수평으로 100 ~ 400입니다. 마찬가지로, 200 ~ 350의 면적은 수직으로 150 // 사각형 rect = 새로운 사각형 (100, 200, 300, 150); // int hh = 0; if (h> 100) HH = (H -100) / 3; 사각형 rect = 새로운 사각형 (0, HH, 227, 100); param.setsourceregion (rect); BufferedImage bi = reader.Read (0, param); imageio.write (bi, "jpg", 새 파일 (dest)); } public static void main (string [] args)은 예외를 {// new imageUtil (). // new ImageUtil (). 컷 티지 ( "imgs/tulips.jpg", "imgs", 250, 70, 300, 400); // new imageUtil (). readusingImagerEader ( "e : //rudongimage/photo/20160302090226.png", "e : //rudongimage/photo/2.png", 227, 163); }}XML 구성
<bean id = "multipartresolver"class = "org.springframework.web.multipart.commons.commonsmultipartresolver"> <!- 사용 가능한 속성 중 하나; 바이트의 최대 파일 크기 <property name = "maxuploadsize"value = "999999999"/>-> </bean>
플러그인 연결
http://download.csdn.net/download/u014596302/9572377
스타일이 조정되지 않으면 못생긴 기능이 있습니다.