SpringMVC combiné avec JCROP pour obtenir un recadrage d'images

Cet article partage le code spécifique de SpringMVC combiné avec JCROP pour réaliser un recadrage d'images pour votre référence. Le contenu spécifique est le suivant

1. Page JSP:

 <form name = "form" action = "<% = request.getContextPath ()%> / uploadDemo / uploadHeledImage" Method = "Post" EncType = "multipart / form-data"> <v> <div> <div> <entrée = "file" name = "imgfile" id = "fcupload" onChange = "readUrl (this);" /> <img src = " id = "cutimg" /> <input type = "HIDDEN" id = "x" name = "x" /> <input type = "HIDDEN" id = "y" name = "y" /> <input type = "HIDDEN" id = "w" name = "w" /> </ div> </ div> <div> onClick = ""> Téléchargez </futton> </div> </ form>

2. Situation de référence des composants JCROP:

 <link rel = "stylesheet" href = "<c: url value =" / ressources / uploadPlugin / css / jQuery.jcrop.css "/>" type = "text / css"> </ link> <script type = "text / javascript" src = "<c: url Value = "/ Resources / uploadPlugin / scripts / jQuery-1.8.3.js" /> "> </ script> <script type =" text / javascript "src =" <c: url value = "/ ressources / uploadPlugin / scripts / jquery.jcrop.js" /> "> </ script>

3. Comment utiliser JCROP

 <Script Type = "Text / JavaScript"> // Définir une API globale, qui est plus flexible pour fonctionner VAR API = NULL; fonction 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], aspecTRATAO: 1, onSelect: updateCoords}); }; if (api! = Undefined) {api.destroy (); }} fonction updatecoords (obj) {$ ("# x"). Val (obj.x); $ ("# y"). Val (obj.y); $ ("# w"). Val (obj.w); $ ("# h"). Val (obj.h); }; } </ script>

4. Code d'arrière-plan:

 @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ève une exception {System.out.println ("==================================================================================================. "Ressources / uploadimages /";; FileName.SubString (0, end); Integer.ParseInt (x); int imageh = Integer.ParseInt (h); int imagew = Integer.ParseInt (W); // 这里开始截取操作 System.out.println ("========= ImageCutStart ============"); ImageCut.imgcut (SrciMagePath, ImageX, Imagey, ImageW, ImageH); System.out.println ("========== IMAMECUTEND ============"); }} return "User / uploadImg / test"; }

5. Classe d'outils ImageCUT.java:

 / ** * Image interceptée * @param srciMageFile Adresse de l'image originale * @param x x Coordonnées pendant l'interception * @param y y coordonnées lors de l'interception * @param deswidth width * @param Desheight Hight * / public static void imgcut (string srciMageFile, int x, int y, int static iMgcut, int, antheight) IMG; ImageFilter Cropfilter; BufferedImage BI = ImageIo.read (nouveau fichier (srciagefile + "_ src.jpg")); int srcwidth = bi.getWidth (); int srcheight = bi.getheight (); if (srcwidth> = deswidth && srcheight> = Desheight) {image image = bi.getScaledInstance (srcwidth, srcheight, image.scale_default); COMPROSSE = NOUVEAU CROPIMAGEFILTER (X, Y, DESWIDTH, DESHEIGHT); img = toolkit.getDefaultToolkit (). CreateImage (new filteTImagesource (image.getsource (), CropFilter)); BufferedImage Tag = new BufferedImage (Deswidth, Desheight, BufferedImage.Type_int_rgb); Graphiques g = tag.getGraphics (); G.DrawImage (img, 0, 0, null); g.dispose (); // Fichier de sortie imageo.write (balise, "jPEG", nouveau fichier (srciagefile + "_ cut.jpg")); }} catch (exception e) {e.printStackTrace (); }}

6. Deux façons d'utiliser JCROP:

1 et 1

 jQuery ('# cropbox'). jcrop ({onchange: showcoords, onselect: showcoords});

2

 var api = $ .jcrop ('# cropbox', {onChange: showPreview, onSelect: showpreview, aspectratio: 1});

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.