تشترك هذه المقالة في رمز SpringMVC المحدد مع JCROP لتحقيق زراعة الصورة للرجوع إليها. المحتوى المحدد كما يلي
1. صفحة JSP:
<form name = "form" Action = "<٪ = request.getContextPath () ٪>/UploadDemo/UploadHeadImage" method = "post" enctype = "multipart/form-data"> <viv> <viv> <div> <input type = "file" name = "imgfile" id = "fcupload 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"/"h" </div> OnClick = ""> تحميل </button> </viv> </part>
2. الوضع المرجعي للمكون JCROP:
<link rel = "stylesheet" href = "<c: url value ="/resources/eploadplugin/css/jquery.jcrop.css "/>" type = "text/css" value = "/resources/uploadplugin/scripts/jQuery-1.8.3.js"/> "> </script> <script type =" text/javaScript "src =" <c: url value = "/apportplugin/scripts/jquery.jcrop.js"/>
3. كيفية استخدام JCROP
<script type = "text/javaScript"> // تحديد واجهة برمجة التطبيقات العالمية ، والتي هي أكثر مرونة لتشغيل var api = null ؛ وظيفة readurl (input) {if (input.files && input.files [0]) {var reader = new fileReader () ؛ reader.readasdataurl (input.files [0]) ؛ reader.onload = function (e) {$ ('#cutimg'). requoveAttr ('src') ؛ $ ('#cutimg'). attr ('src' ، e.target.result) ؛ API = $ .JCROP ('#cutimg' ، {setSelect: [20 ، 20 ، 200 ، 200] ، SideRatio: 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") string x ، requestparam (value = "y") string y ، @requestparam (value = "h" MultipartFile imageFile ) throws Exception{ System.out.println("============================================================ System.out.getServletContext().getRealPath("/"); String resourcePath = "الموارد/التحميل/" ؛ filename.substring (0 ، ملف جديد (ملف تعريف) ؛ integer.parseint (x) ؛ int imageh = integer.parseint (h) ؛ int imagew = integer.parseint (w) ؛ // 这里开始截取操作 system.out.println ("================================") ؛ ImageCut.ImgCut (srcimagepath ، imagex ، imagey ، imagew ، imageh) ؛ System.out.println ("======================================") ؛ }} إرجاع "user/uploadimg/test" ؛ } 5. فئة أدوات ImageCut.java:
/ *** الصورة المعتادة* param srcimagefile عنوان الصورة الأصلي* param x x الإحداثيات أثناء اعتراضه* param y y إحداثيات أثناء اعتراضها* param deswidth width* @param desheight height*/ public static imgcut (String srcimagefile ، 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 = new cropAgeFilter (x ، y ، deswidth ، desheight) ؛ img = toolkit.getDefaultToolkit (). createImage (new FilledImagesource (Image.getSource () ، cropfilter)) ؛ علامة bufferedImage = جديد bufferedImage (deswidth ، desheight ، bufferedImage.type_int_rgb) ؛ الرسومات g = tag.getGraphics () ؛ G.DrawImage (img ، 0 ، 0 ، null) ؛ G.Dispose () ؛ // file 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 ، sideRatio: 1}) ؛ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.