Dieser Artikel teilt den spezifischen Code von SpringMVC in Kombination mit JCROP, um das Bild zu realisieren, das für Ihre Referenz geschnitten wird. Der spezifische Inhalt ist wie folgt
1. JSP Seite:
<Formular name = "Form" action = "<%= request.getContextPath ()%>/UploadDemo/UploadheadImage" methode "post" engType = "MultiPart/Form-Data"> <div> <div> <div> <input type = "Datei" name "name" name "name" iMgFile "id =" fcUpload = "reesurl (". id = "cutimg"/> <Eingabe type = "Hidden" id = "x" name = "x"/> <input type Onclick = ""> Upload </button> </div> </form> 2. Referenzsituation Jcrop Component:
<link rel = "stylesheet" href = "<c: url value ="/ressourcen/uploadPlugin/css/jQuery.jcrop.css "/>" type = "text/css"> </link> <script type = "text/javascript" src = "<c: url value = "/ressourcen/uploadPlugin/scripts/jQuery-1.8.3.js"/> "> </script> <script type =" text/javascript "src =" <c: url value = "/ressourcen/uploadPlugin/script/jQuery.jcrop.js"/> "> </uploadPlugin/script/jQuery.jcrop.js"/> "> </</script>
3.. Wie man JCrop benutzt
<script type = "text/javaScript"> // eine globale API definieren, die flexibler ist, um var api = null zu bedienen; Funktion ReadUrl (input) {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], Aspektratio: 1, Onselect: UpdateCoords}); }; if (api! = undefiniert) {api.Destroy (); }} Funktion updateCoords (obj) {$ ("#x"). Val (obj.x); $ ("#y"). Val (obj.y); $ ("#W"). Val (obj.w); $ ("#H"). Val (obj.h); }; } </script> 4. Hintergrundcode:
@RequestMapping(value = "/uploadHeadImage") public String uploadHeadImage( HttpServletRequest request, @RequestParam(value = "x") String x, @RequestParam(value = "y") String y, @RequestParam(value = "h") String h, @RequestParam(value = "w") String w, @RequestParam(value = "imgFile") MultiPartFile ImageFile) löst Ausnahme aus {System.out.println ("============================================================ -out.getServletContext (). "Ressourcen/Uploadimages/"; Dateiname.Substring (0, Ende); 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 ("============================="); }} return "user/uploadimg/test"; } 5. ImageCut.Java Tool Class:
/** * Intercepted image* @param srcImageFile Original image address* @param x x coordinates during intercepting* @param y y coordinates during intercepting* @param desWidth Intercepted width* @param desHeight Intercepted height*/ public static void imgCut(String srcImageFile, int x, int y, int desWidth, int desHeight) { try { Image img; ImageFilter Curtfilter; Bufferedimage bi = imageio.read (neue Datei (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); Curtfilter = neuer CropimageFilter (X, Y, Deswidth, Desheight); IMG = Toolkit.getDefaulttoolkit (). CreateImage (New FilteredImageSource (Image.getSource (), Curtfilter)); Bufferedimage tag = new bufferedImage (Deswidth, DesHeight, bufferedimage.type_int_rgb); Grafik g = Tag.getGraphics (); G.Drawimage (IMG, 0, 0, NULL); g.disponse (); // Ausgabedatei imageio.write (Tag, "JPEG", neue Datei (srcimageFile+"_ cut.jpg")); }} catch (Ausnahme e) {e.printstacktrace (); }} 6. Zwei Möglichkeiten, JCrop zu verwenden:
1.
jQuery ('#cropbox').2.
var api = $ .jcrop ('#cropbox', {onchange: showpreview, onselect: showpreview, asspectratio: 1});Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.