บทความนี้แบ่งปันรหัสเฉพาะของ SpringMVC รวมกับ JCrop เพื่อรับรู้ถึงการครอบตัดภาพสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. หน้า JSP:
<form name = "form" action = "<%= request.getContextPath ()%>/uploadDemo/uploadHeadImage" method = "post" enctype = "multipart/form-data"> <div> <div> <div> id = "cutimg"/> <อินพุต type = "hidden" id = "x" name = "x"/> <อินพุต type = "ซ่อน" id = "y" name = "y"/> <อินพุตประเภท = "ซ่อน" id = "w" name = "w"/> onclick = ""> อัปโหลด </pution> </div> </form>
2. สถานการณ์อ้างอิงองค์ประกอบ JCrop:
<link rel = "stylesheet" href = "<c: url value ="/ทรัพยากร/uploadplugin/css/jQuery.jcrop.css "/>" type = "text/css"> </link> value = "/resources/uploadplugin/scripts/jQuery-1.8.3.js"/> "> </script> <script type =" text/javascript "src =" <c: url value = "/uploadplugin/scripts/jquery.jcrop.js"/>
3. วิธีใช้ JCrop
<script type = "text/javascript"> // กำหนด API ทั่วโลกซึ่งมีความยืดหยุ่นมากขึ้นในการใช้งาน var api = null; ฟังก์ชั่น 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); - } </script> 4. รหัสพื้นหลัง:
@RequestMapping (value = "/uploadHeadImage") สตริงสาธารณะ uploadHeadImage (httpservletRequest Request, @requestparam (value = "x") สตริง x, @requestparam (value = "y") สตริง y, @requestparam (value = "h") สตริง MultipartFile ImageFile) พ่นข้อยกเว้น {System.out.println ("============================================================= "Resources/UploadImages/" ถ้า (ImageFile! = null) {ถ้า (fileuploadutil.allowupload (imagefile.getContentType ())) filename.substring (0, end); Integer.parseint (x); int imageh = integer.parseint (h); INTEMEW = Integer.ParseInt (W); // 这里开始截取操作 system.out.println ("=========== imagecutstart =============="); ImageCut.imgcut (Srcimagepath, Imagex, Imagey, Imagew, Imageh); System.out.println ("=========== imagecutend =============="); }} return "ผู้ใช้/uploadimg/test"; - 5. Imagecut.java Tool Class:
/ *** ภาพที่ถูกสกัดกั้น* @param srcimagefile ที่อยู่ภาพต้นฉบับ* @param x x พิกัดในระหว่างการสกัดกั้น* @param y y พิกัดในระหว่างการสกัดกั้น* @param deswidth ที่สกัดกั้นความกว้าง* @param desheight intercepted ความสูง*/ สาธารณะ {Image IMG; ImageFilter Cropfilter; bufferedImage bi = imageio.read (ไฟล์ใหม่ (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 = ใหม่ cropimagefilter (x, y, deswidth, desheight); img = toolkit.getdefaulttoolkit (). createImage (FilterEdimagesource ใหม่ (image.getSource (), cropfilter)); bufferedImage tag = new bufferedImage (deswidth, desheight, bufferedimage.type_int_rgb); กราฟิก g = tag.getGraphics (); G.DrawImage (IMG, 0, 0, NULL); G.Dispose (); // ไฟล์เอาต์พุต imageio.write (แท็ก, "jpeg", ไฟล์ใหม่ (srcimagefile+"_ cut.jpg")); }} catch (exception 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 มากขึ้น