Lassen Sie mich Ihnen zuerst die Renderings zeigen:
Seitencode
Die UUID des Benutzers ist in einem toten Test geschrieben
<%@ page Language = "java" contentType = "text/html; charset = utf-8" pageCoding = "utf-8"%> <! docType> <html Lang = "en"> <Head> <title> Benutzer avatar cropping </title> <meta http-tequiv = "content-type-type" content "content/html-texe-texe =" content-type "content" content "content/html. /> <link rel = "stylesheet" href = "ressourcen/jcrop/css/jquery.jcrop.css"> <link rel = "styleSheet" href = "ressourcen/css/foto.css"> <script src = "ressourcen/js/jquery.min src = "Ressourcen/jcrop/js/jQuery.jcrop.js"> </script> <script src = "ressourcen/js/ajaxFileUpload.js"> </script> <body> <div> <div> <div> <div> <h1> avatar croping </h1> </div> </div> </div> </IMGSrc = Ressourcen/IMGG "</h1> </h1> </h1> </h1> </h1> </h1> </h1> </h1> </h1> </i img. id = "target"/> <div id = "preview-pane"> <div> <img src = "ressourcen/img/test.jpg"/> </div> <div style = 'float: links; Anzeige: Inline;'> <a class = 'btn_addpic' href = "javascript: void (0); id = "upload_image" type = "Datei" name = "upload" accept = "image/*" class = "fileprew"/> </a> </div> <div style = 'float: rechts; Anzeige: Inline;'> <a class = 'btn_addpic' href = "javascript: void (0);" onclick = 'subled ()'> <span> subieren </span> </a> </div> </div> </div> </div> </div> </div> </body> <script type = "text/javaScript"> var Global_API = ""; Umfang), um die API- und Bildgröße zu halten // Variablen erstellen (in diesem Bereich) API und Bildgröße var jcrop_api, // einige Informationen über die Vorschau-Reihe abrufen // einige Informationen Vorschau $ preview = $ ('#preview-pane'), $ pcnt = $ ('#Vorschau-Pane. img '), xsize = $ pcnt.width (), ysize = $ pcnt.height (); this.getBounds (); boundX = bounds [0]; boundy = bounds [1]; // Speichern Sie die API in der variablen jcrop_api // Speicher apijcrop_api = this; // Verschieben Sie die Vorschau in den JCROP -Container für die CSS -Positionierung // Vorschau Die JCROP -Container -CSS -Positionierungspositionierung eingeben $ preview.AppendTo (jcrop_api.ui.holder);}); Funktion updatePreview (c) {if (parseInt (cw)> 0) global_api = c; {var rx = xsize / cw; var ry = ysize / ch; $ pimg.css ({breit: math. Math.round(ry * boundy) + 'px',marginLeft: '-' + Math.round(rx * cx) + 'px',marginTop: '-' + Math.round(ry * cy) + 'px'});}};//===================$('#upload_image').change(function(event) {// Erhalten Sie das HTML5 -JS -Objekt der Datei gemäß diesem <eingabe> var -Dateien = Ereignis.target.files, Datei; window.webkiturl; // generieren Sie das Ziel urlvar imgurl = url.createObjecturl (Datei); // Verwenden Sie diese URL, um eine <img> zu generieren, um es $ ('. JCrop-Halter img') zu generieren. Attr ('Src', imgurl); $ ('. imgurl);}}); // ========================================== $ ("#upload_image"). Änderung (Funktion () {Tag = True;}); ======================================================================= ======================================================================= ======================================================================== ======================================================================= ======================================================================= ======================================================================= "") {ajaxFileUpload ();} else {alert ('hast du nichts getan?');}} // AJAX-Datei-Upload-Funktion ajaxFileUpload () {$ .ajaxFileUpload ({url: uploadPhoto ', // Die Server-Sside-Anforderung, die für Datei-Upload-Uploads-Updat-upload-upload-upload-upload-upload-upload-upload-upload-upload-upload-upload-upload-adoad-up-upload-upo-upo- // //, //. 'upload_image', //The id attribute dataType: 'json', //The return value type is generally set to jsondata:{x:global_api.x,y:global_api.y,w:global_api.w,h:global_api.h,pw:boundx,ph:boundy,unid:'test'}, //The data uploaded together succeeds: function (data){ //The Der Server reagiert erfolgreich auf die Verarbeitungsfunktion, wenn (Daten.Result) {alert ('Erfolg');} else {alert ('fehlgeschlagen');} window.location.reload (); // Die aktuelle Seite}});} </script> </html> aktualisierenHintergrundcode
@ResponseBody@requestmapping ("UploadPhoto") public map <String, Objekt> UploadPhoto (@RequestParam ("Upimage") MultipartFile ImageFile, httpServletRequest -Anforderung, httpServletresponse) löst Ausnahme aus {map <String, Objekt. request.getParameter ("unid"); String x = request.getParameter ("x"); String y = request.getParameter ("y"); String H = Request.GetParameter ("H"); String W = Request.GetParameter ("W"); // Die tatsächliche Bildweite und Höhe des Seitenstring -Answerte. Request.GetParameter ("PW"); // Der Grafik -Cut -Parameter intagex = integer.parseInt (x); intagey = Integer.ParseInt (y); int imageH = Integer.parseInt (h); int imagew = Integer.Parseint (w); RealPath = Request.GetSession (). getServletContext (). getRealPath ("/"); String ressourcenpath = "Ressourcen/Uploadimages/"; try {if (ImageFile! ImageCut.imgcut (ImageFile.getInputStream (), Imagex, ImageW, ImageH, Srcw, SRCH); if (b! (UserService.UpdateByPrimaryKeysselective (Benutzer) == 1)? Tag = true: tag; result.put ("Ergebnis", Tag);}}}} catch (Ausnahme E) {E.printStackTrace ();Bildschneidwerkzeuge
Paket com.ssm.demo.utils; import Java.awt.graphics; Import Java.awt.image; Bild Java.awt.toolkit; Import Java.awt.image.Buffeedimage; Bild java.awt.image.cropimageFilter; java.awt.image.imageFilter; import Java.io.BytearrayoutputStream; Import Java.io.inputStream; Import Javax.imageo.imageo; öffentliche Klasse imagecut {/*** Bildausschnitt** @param srcimageFile* original @param @param @param @Param @Param @Param @Param @Param @Param @ -x -x -koordinate während des Abschnitts von @param @@Param @Param @ -x -x -koordinate während des Abschnitts* @ @parparam @param @parpate @ -xpaper. Deswidth* abgefangene Breite* @Param DesHeight* abgefangene Höhe* @param srcwidth* Seite Bildbreite* @param srcheight* Seitenbildhöhe**/public static byte [] imgcut (InputStream -Eingabe, int x, int y, inteswidth, int Desheight, int srcwidth, int. Int. compfilter; bufferedimage bi = imageio.read (Eingabe); if (srcwidth> = Deswidth && srcheight> = DesHeight) {Image Image = bi.getScaledInstance (srcwidth, srcheight, Image.scale_Default); Toolkit.getDefaulttoolkit (). CREATEIMAGE (New FilteredImageSource (Image.getSource (), Curtfilter); BufferedImage Tag = new bufferedImage (Deswidth, DesHeight, BufferedImage. null); g.disponse (); // Ausgabedatei bytearrayoutputStream out = new bytearrayoutputStream (); ImageIo.Write (Tag, "JPEG", out);Das obige ist der Beispielcode zum Hochladen von JCROP+AJAxUpload -Bildschnitt und Hochladen, das der Editor Ihnen vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!