먼저 렌더링을 보여 드리겠습니다.
페이지 코드
사용자의 UUID는 죽은 테스트로 작성되었습니다
<%@ page language = "java"contmenttype = "text/html; charset = utf-8"pageencoding = "utf-8"%> <! doctimpe> <html lang = "en"> <head> <title> 사용자 avatar crping </title> <meta http-equiv = "content-type"= avatar crping </html; chtml; /> <link rel = "Stylesheet"href = "resources/jcrop/css/jquery.jcrop.css"> <link rel = "Stylesheet"href = "resources/css/photo.css"> <scrc = "resources/js/jquery.min.js"> <Script> <스크립트 src = "Resources/Jcrop/JS/JQuery.jcrop.js"> </script> <script src = "resources/js/js/ajaxfileupload.js"> </script> <div> <div> <div> <div> <h1> Avatar Cropping </h1> </h1> <img src =. id = "target"/> <div id = "preview-pane"> <div> <img src = "resources/img/test.jpg"/> </div> <div style = 'float : left; display : inline;'> <a class = 'btn_addpic'href = "javaScript : void (0) <em>+</em>+</em> id = "upload_image"type = "file"name = "upload"accept = "im onclick='submit()'><span>Submit</span> </a></div></div></div></div></div></div></body><script type="text/javascript">var global_api = "";var boundx ="";//page image width var boundy ="";//page image height var tag = false;$(function() {// Create variables (in 이 범위) API 및 이미지 크기를 유지하기위한 // (이 범위에서) API 및 이미지 크기 var jcrop_api, // 미리보기 창에 대한 정보를 가져옵니다. // 일부 정보 미리보기 Pane $ preview = $ ( '#preview-pane'), $ pcnt = $ ( '#preview-pane .preview-container') img '), xsize = $ pcnt.width (), ysize = $ pcnt.height (); $ ('#target '). jcrop ({onchange : updatepreview, onspectratio : updatepreview, aspectratio : xsize/ysize}, function () {api를 사용하여 실제 이미지 크기를 얻으려면 // this.getBounds (); boundx = bounds [0]; boundy = bounds [1]; // jcrop_api 변수에 API를 저장하십시오. $ preview.appendto (jcrop_api.ui.holder);}); 함수 updatepreview (c) {if (parseint (cw)> 0) global_api = c; {var rx = xsize / cw; var ry = ysize / ch; $ pimg.css ({width : math : round (rx)) + 'px', math.round (ry * boundy) + 'px', marginleft : '-' + math.round (rx * cx) + 'px', margintop : '-' + math.round (ry * cy) + 'px'});}}; // ============================== ( 'upload_image'). {// <input> var files = event.target.files, if (files && files.length> 0)에 따라 파일의 html5 js 객체를 가져옵니다. window.webkiturl; // 대상을 생성합니다. urlvar imgurl = url.createobjecturl (file); //이 URL을 사용하여 <Img>을 생성하여 $ ( '. imgURL);}});//=============================================$("#upload_image").change(function(){tag=true;});});//================== ============================================================================ ============================================================================ ========================================================================== ============================================================================ ============================================================================ ============================================================================ "") {ajaxfileupload ();} else {alert ( '당신은 아무것도하지 않았습니까?');}} // ajax 파일 업로드 함수 ajaxfileupload () {$ .ajaxfileupload ({url : 'uploadphoto', // 파일에 사용 된 서버-측 주소 : // 일반적으로 거짓으로 설정되었습니다. 'upload_image', // id 속성 데이터 유형 : 'json', // 반환 값 유형은 일반적으로 jsondata : {x : global_api.x, y : global_api.y, w : global_api.w, h : global_api.h, pw : boundx, ph : boundy, unid : 'test'}, // together sup (functions) : // if (data.result) {alert ( 'success');} else {alert ( 'failior ('failed '));} window.location.reload (); // 현재 페이지를 새로 고침});} </html>배경 코드
@responsebody@requestmapping ( "uploadphoto") public map <string, object> uploadphoto (@requestparam ( "upimage") multipartfile imagefile, httpservletrequest request, httpservletResponse 응답) 예외 {map <string, object> result = new hashmap <string> (); bolean tag =; request.getParameter ( "unid"); String x = request.getParameter ( "x"); String y = request.getParameter ( "y"); String h = request.getParameter ( "h"); String w = request.getParameter ( "W"); // 페이지의 실제 이미지 너비 및 높이 Pheight = request.getParameter ( "ph"); request.getParameter ( "pw"); // 그래프 컷 매개 변수 int imagex = integer.parseint (x); int imagey = integer.parseint (y); int imageh = integer.parseint (h); int imagew = integer.parseint (w); int srch = integer.parseint (int srcw); realpath = request.getSession (). getServletContext (). getRealPath ( "/"); String ResourcePath = "resources/uploadImages/"; try {if (imageFile! = null) {if (fileUploadUtil.ContEntType ()) {// intercept 운영이 시작됩니다 [] b = = =. imageEcut.imgcut (imageFile.getInputStream (), imagex, imagey, imagew, imageh, srcw, srch); if (b! = null) {// database user = userervice.selectbyPrimaryKey (unid); user.setphoto (b); tag =. (userService.upDateByPrimaryKeySelective (user) == 1)? tag = true : true : tag; result.put ( "result", tag);}}} catch (예외 e) {e.printstacktrace ();} result.put ( "result", return result;}이미지 절단 도구
package com.ssm.demo.utils; import java.awt.graphics; import java.awt.image; image java.awt.toolkit; import java.awt.image.bufferedimage; image java.awt.image.cropimagefilter; import java.awt.image.filported imagesourmort java.awt.image.imagefilter; import java.io.bytearrayoutputStream; import java.io.inputStream; import javax.imageio.imageio; public class imagecut {/*** 이미지 인터셉트** @param srcimagefile* 원본 이미지 주소* @param x* x coordinates 동안 @param y coordinates 동안* @param srcimagefile* 원본 이미지 주소*** @param x* x coordinates. deswidth* intercepted width* @param desheight* 인터셉트 높이* @param srcwidth* 페이지 이미지 너비* @param srcheight* @param srcheight* 페이지 이미지 높이**/public static byte [] imgcut (입력 x, int y, int deswidth, int desheight, int srcwidth, int srcwidth, int grcheight) img; imageFilter cropfilter; bufferedImage bi = imageio.read (입력); if (srcwidth> = deswidth && srcheight> = desheight) {image image = bi.getScaledInstance (srcwidth, srcheight, image.scale_default); creat filter (x, x, w, a, gwidTh); desheight); img = 툴킷. getDefaultToolKit (). createImage (new FilterdImagesSource (image.getSource (), cropfilter); bufferedImage tag = new bufferedImage (deswidth, desheight, bufferedimage.type_int_rgb); g.graphics (); g.getgraphics (); 0, null); g.dispose (); // output 파일 bytearrayoutputStream out = new ByTearRayoutputStream (); imageio.write (tag, "jpeg", out); return.tobytearRay ();}} catch (exception e) {printstacktrace ();}}}}}}}위의 것은 Jcrop+Ajaxupload 이미지 절단을 업로드하고 편집기가 소개 한 업로드의 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!