ให้ฉันแสดงการเรนเดอร์ก่อน:
รหัสหน้า
UUID ของผู้ใช้เขียนไว้ในการทดสอบ Dead
<%@ page language = "java" contentType = "ข้อความ/html; charset = utf-8" pageencoding = "utf-8"%> <! doctype> <html lang = "en"> <head> /> <link rel = "stylesheet" href = "ทรัพยากร/jcrop/css/jQuery.jcrop.css"> <link rel = "stylesheet" href = "ทรัพยากร/css/photo.css"> <script src = "ทรัพยากร/js/jquery.min.js" src = "ทรัพยากร/jcrop/js/jQuery.jcrop.js"> </script> <สคริปต์ src = "ทรัพยากร/js/ajaxfileupload.js"> </script> <body> <div> <div> <div> <div> id = "target"/> <div id = "preview-pane"> <div> <img src = "ทรัพยากร/img/test.jpg"/> </div> <div style = 'float: ซ้าย; id = "upload_image" type = "file" name = "upload" accept = "image/*" class = "fileprew"/> </a> </div> <div style = 'float: ขวาแสดง: inline;'> <a class = 'btn_addpic' href = onclick = 'subment ()'> <span> ส่ง </span> </a> </div> </div> </div> </div> </div> </div> </body> <script type = "text/javascript"> var global_api = "" var boundx = " ขอบเขต) การเก็บ API และขนาดภาพ // สร้างตัวแปร (ในขอบเขตนี้) API และขนาดภาพ var jcrop_api // คว้าข้อมูลบางอย่างเกี่ยวกับบานหน้าต่างตัวอย่าง // รับข้อมูลบางอย่างข้อมูลบางอย่าง $ preview = $ (#preview-pane '), $ pcnt = $ ('#preview-pane. img '), xsize = $ pcnt.width (), ysize = $ pcnt.height (); $ ('#target '). jcrop ({onchange: updatePreview, onSelect: updatePreview, aspectratio: xsize/ysize} this.getBounds (); boundx = bounds [0]; boundy = bounds [1]; // เก็บ api ในตัวแปร jcrop_api // storage apijcrop_api = this; // ย้ายตัวอย่างไปยังคอนเทนเนอร์ JCrop สำหรับตำแหน่ง CSS // $ preview.appendto (jcrop_api.ui.holder);}); ฟังก์ชั่น updatePreview (c) {ถ้า (parseint (cw)> 0) global_api = c; {var rx = xsize / cw; var ry = ysize / ch; $ pimg.css * Boundy) + 'px', marginleft: '-' + math.round (rx * cx) + 'px', margintop: '-' + math.round (ry * cy) + 'px'});}}; // ===================== HTML5 JS Object ของไฟล์ตาม <อินพุต> var files = event.target.files, file; urlvar imgurl = url.createObjecturl (ไฟล์); // ใช้ url นี้เพื่อสร้าง <img> เพื่อแสดง $ ('. jcrop-holder img'). attr ('src', imgurl); $ ('preview-container img') imgurl);}}); // ================================================= ("#upload_image"). เปลี่ยน (ฟังก์ชั่น () {tal;};}; - - - - - - "") {AjaxFileUpload ();} else {Alert ('คุณไม่ได้ทำอะไรเลยหรือ?');}} // ไฟล์อัพโหลดไฟล์ AjaxFilePileLoad () {$ .AJAXFileUpload (upload: 'uploadphoto' 'upload_image', // ข้อมูลแอตทริบิวต์ ID: 'json', // ประเภทค่าคืนถูกตั้งค่าโดยทั่วไปเป็น JSondata: {x: global_api.x, y: global_api.y, w: global_api.w, h: global_api.h, pw: boundx, ph: boundy, unid: 'test' เซิร์ฟเวอร์ตอบสนองต่อฟังก์ชั่นการประมวลผลได้สำเร็จหาก (data.result) {แจ้งเตือน ('ความสำเร็จ');} else {แจ้งเตือน ('ล้มเหลว');} window.location.reload (); // รีเฟรชหน้าปัจจุบัน}});รหัสพื้นหลัง
@responsebody@requestmapping ("uploadphoto") แผนที่สาธารณะ <string, object> uploadphoto (@requestparam ("upimage") multipartfile imagefile, httpservletrequest คำขอ httpservletResponse) request.getParameter ("unid"); string x = request.getParameter ("x"); string y = request.getParameter ("y"); String h = request.getParameter ("H"); String w = request.getParameter ("W"); request.getParameter ("pw"); // พารามิเตอร์การตัดกราฟ int imagex = integer.parseint (x); int imagey = integer.parseint (y); int imageh = integer.parseint (h); int iNagew = integer.parseint (w); RealPath = request.getSession (). getServletContext (). getRealPath ("/"); String ResourcePath = "Resources/UploadImages/"; ลอง {ถ้า (ImageFile! = null) {ถ้า (fileuploadutil.allowupload imageCut.imgcut (imagefile.getInputStream (), imagex, imagey, imagew, imageh, srcw, srch); ถ้า (b! = null) {// บันทึกลงในผู้ใช้ฐานข้อมูลผู้ใช้ = userservice.selectbyprimarykey (unid); user.setphoto (b); (userservice.updateByPrimaryKeySelective (ผู้ใช้) == 1)? tag = true: tag; result.put ("result", tag);}}}} catch (Exception e) {e.printstacktrace ();} result.put ("ผลลัพธ์", tag);เครื่องมือตัดรูปภาพ
แพ็คเกจ com.ssm.demo.utils; นำเข้า java.awt.graphics; นำเข้า java.awt.image ภาพ java.awt.toolkit; นำเข้า java.awt.image.bufferedimage; ภาพ java.awt.image.cropimagefilter; java.awt.image.imagefilter; นำเข้า java.io.ByTearrayOutputStream นำเข้า Java.io.InputStream; นำเข้า Javax.imageio.imageio; คลาสสาธารณะ imagecut {/*** การสกัดกั้นภาพ*** @param srcimagefile* ที่อยู่ deswidth* ความกว้างที่สกัดกั้น* @param desheight* ความสูงที่สกัดกั้น* @param srcwidth* หน้าภาพความกว้าง* @param srcheight* ความสูงของภาพหน้า*/ไบต์คงที่ [] Imgcut (อินพุตอินพุต cropfilter; bufferedImage bi = imageio.read (อินพุต); ถ้า (srcwidth> = deswidth && srcheight> = desheight) {image image = bi.getscaledInstance (srcwidth, srcheight, image.scale_default); = toolkit.getDefaultToolkit (). createImage (ใหม่ FilterEdimagesource (image.getSource (), cropfilter)); bufferedImage tag = bufferedimage ใหม่ (deswidth, desheight, bufferedimage.type_int_rgb); null); g.dispose (); // ไฟล์เอาต์พุต bytearrayoutputStream out = new ByteArrayOutputStream (); imageio.write (แท็ก, "jpeg", out); return.tobytearray ();}} catch (ยกเว้น e) {e.printstacktrace ()ด้านบนเป็นรหัสตัวอย่างสำหรับการอัปโหลด JCrop+Ajaxupload การตัดภาพและอัปโหลดที่ตัวแก้ไขแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!