HTML
<#-อัปโหลดหน้าทดสอบ Avatar โดยใช้ปลั๊กอิน imgareaselect->
ในที่สุดก็อัปโหลดปลั๊กอินนี้เพื่อเรียนรู้การอ้างอิง
<link rel = "stylesheet" type = "text/css" href = "$ {frontres}/imgareasel/css/imgareasel-animated.css"/> <link rel = "stylesheet" type = "text/css" href = "$ {frontres type = "text/javascript" src = "$ {frontres}/imgareasel/jquery-1.4.2.min.js"> </script> <script type = "text/javascript" src = "$ {frontres} src = "$ {frontres}/imgareaselect/ajaxfileupload.js"> </script> <script> ฟังก์ชั่น addfile (obj) {//document.getElementByid('img').src = path; $ .ajaxFileUpload ({url: '$ {huluurl}/trainer/upload/ajaxupload', // ที่อยู่คำขอด้านเซิร์ฟเวอร์ที่ใช้สำหรับการอัพโหลดไฟล์ SecureUri: FALSE // ไม่ว่าจะต้องใช้โปรโตคอลความปลอดภัยหรือไม่ ความสำเร็จของ JSON: ฟังก์ชั่น (ข้อมูล) {// เซิร์ฟเวอร์ตอบสนองต่อฟังก์ชั่นการประมวลผล var infoarray = evaln ("("+data+")"); การแจ้งเตือน ('การสื่อสารกับเซิร์ฟเวอร์ล้มเหลวโปรดลองอีกครั้งในภายหลัง!'); } ฟังก์ชั่นดูตัวอย่าง (img, การเลือก) {if (! selection.width ||! selection.height) return; // ดูตัวอย่าง var scalex = 100 /selection.width; var scaley = 100 / selection.height; // var imgx = document.getElementById ("photo"). style.width; var imgx = parseint ($ ("#photo"). css ("width"). แยก ("px") [0]); var imgy = parseint ($ ("#photo"). css ("ความสูง"). แยก ("px") [0]); console.debug (imgx+"===="+imgy); $ ('#preview img'). css ({width: math.round (scalex * imgx), ความสูง: math.round (scaley * imgy), marginleft: -math.round (scalex * selection.x1), Margintop: -math.round $ ('#x1'). val (selection.x1); $ ('#y1'). val (selection.y1); $ ('#x2'). val (selection.x2); $ ('#y2'). val (selection.y2); $ ('#w'). val (selection.width); $ ('#h'). val (selection.height); // backend data $ ('#x1s'). val (selection.x1); $ ('#y1s'). val (selection.y1); $ ('#x2s'). val (selection.x2); $ ('#y2s'). val (selection.y2); $ ('#imgx'). val (parseint (imgx)); // ความกว้างความกว้างดั้งเดิม $ ('#imgy'). val (parseint (imgy)); // ความสูงดั้งเดิม} $ (ฟังก์ชั่น (การเลือก) {var imgx = $ ("#photo"). css ("width"). แยก ("px") [0]; var imgy = $ ("#photo"). css ("ความสูง"). if (imgx> imgy) {ares = imgy; พื้นที่การเลือก ias.setOptions ({show: true}); = 100 / ares; $ (#x1s '). Val (0); </script> <div style = "margin-top: 20px;"> <div> <div> <div> <div> <h4 style = "Font-Weight: 600; Float: ซ้าย"> อัปโหลดรูปภาพ </h4> </div> <div> <div style = " Overflow: Hidden; พื้นหลังสี: #8DC21F; สี: #FFFFFF; "> <span>+เพิ่มรูปภาพ </span> <อินพุต ID =" photofile "type =" file "name =" photofile "onchange =" addFile (นี่); " style = "ความสูง: 34px; ตำแหน่ง: สัมบูรณ์; ขวา: 0px; ด้านบน: 0px; มาร์จิ้น: 0px; padding: 0px; เคอร์เซอร์: ตัวชี้; opacity: 0;"> </div> </div> <span style = "float: left; PNG และ GIF ขนาดไม่เกิน 5m </li></ul> </span> </div> </div> <div> <div> <img src = "/images/$ {(trener.photo)!" "}" id = "img"> </div> = "$ {huluurl}/trainer/upload/uploadphototest" method = "post" enctype = "multipart/form-data"> <input type = "text" id = "x1s" name = "x1s" value = "-"/> = "x2s" value = "-" /> <อินพุต type = "text" id = "y2s" name = "y2s" value = "-" /> <อินพุตประเภท = "ข้อความ" id = "imgx" name = "imgx" value = "-" /> 80px "> <div> <div> <button type =" button "id =" Chongxinshangchuan "> re-upload </button> </div> <div> <button type =" submit "id =" Baocun "> บันทึก </div> </div> </div> </div> <div id = "root"> <div id = "main"> <div> <div> <div style = "float: ซ้าย; ความกว้าง: 50%; "> <p> คลิกและลากบนภาพเพื่อเลือกพื้นที่ </p> <div> <div> <div style =" line-height: 300px; TEXT-ALIGN: CENTER; ล้น: ซ่อน; z-index: 1001; ความกว้าง: 300px; ความสูง: 300px; ตำแหน่ง: ญาติ; ซ้าย: 50%; ด้านบน: 50%; ขอบซ้าย: -150px; ระยะขอบด้านบน: -150px; "> <img id =" photo "src ="/images/$ {(trainer.photo)! ""} "style =" Max-Height: 300px; Max-Width: 300px; "/> </div> </div> ความกว้าง: 50%; "> <p style =" ขนาดตัวอักษร: Font-Weight: BOLD; Padding-Left: 0.1em; "> การเลือกดูตัวอย่าง </p> <div> <div id =" preview "> <img src ="/images/$ {trainer.photo!} "/> </div> </div> <table> <thead> <tr> <th colspan =" 2 "สไตล์ = Font-Weight: ตัวหนา; TEXT-ALIGN: ซ้าย; Padding-Left: 0.1em; "> พิกัด </th> <th colspan =" 2 "style =" ขนาดตัวอักษร: 110%; Font-Weight: ตัวหนา; TEXT-ALIGN: ซ้าย; Padding-Left: 0.1em; "> ขนาด </th> </tr> </thead> <tbody> <tr> <td> <b> x <ub> 1 </sub>: </b> </td> <td> <อินพุต type =" text "id =" x1 "value ="-"/> type = "text" value = "-" id = "w"/> </td> </tr> <tr> <td> <b> y <ub> 1 </sub>: </b> </td> <td> <อินพุต type = "text" id = "y1" value = "-"/> </td> </tr> <tr> <td> <b> x <ub> 2 </sub>: </b> </td> <td> <อินพุตประเภท = "ข้อความ" id = "x2" value = "-"/> </td> <td> </td> </tr> <td> <b> y <ub> 2 </sub>: </b> </td> <td> <อินพุต type = "text" id = "y2" value = "-"/> </td> <td> </td> <td>ชวา
// การแสดงภาพต้องใช้พา ธ เสมือน (tomcat) บนเซิร์ฟเวอร์เซิร์ฟเวอร์ xml <บริบท debug = "0" docBase = "g:/image" path = "/images" reloadable = "true"/> echo ข้อมูล [java] ดูการคัดลอก = "touploadphoto", method = requestmethod.get) โมเดลสาธารณะและวิวทิวทัศน์ touploadtest () {modelandview mav = leftmenu ("/trainer/upload/uploadphoto"); // เทรนเนอร์เทรนเนอร์ = null; ลอง {long userId = frontshiRoutil.getUserId (); if (null! = userId) {trainer = trainerrepo.findone (userId); TrainerDBSVC.UPDATELASTLOGINTIME (USERID); }} catch (exception e) {e.printstacktrace (); } mav.addobject ("เทรนเนอร์", เทรนเนอร์); กลับมา mav; } // ภาพการรีเฟรชในพื้นที่ @RequestMapping ("/ajaxupload") สาธารณะ @ResponseBody AjaxResult AjaxUpload (MultiparthttpservletRequest คำขอ) {Trainer Trainer = New Trainer (); // รับภาพแรก (รับไฟล์ที่อัปโหลดตามชื่อของแผนกต้อนรับส่วนหน้า) ไฟล์ multipartFile = request.getFile ("photofile"); if (file.getSize ()! = 0) {// รับชื่อไฟล์: string filename = file.getoriginalfilename (); Timetype String = null; if (null! = filename &&! filename.equals ("")) {string imgtype = filename.substring (filename.lastindexof (".")); // รับสายพา ธ ctxpath = "e:/rudongimage/photo/"; // สร้างไฟล์ไฟล์ dirpath = ไฟล์ใหม่ (ctxpath); if (! dirpath.exists ()) {dirpath.mkdirs (); } // ใช้เวลาเป็นวันที่ชื่อไฟล์วันที่ = วันที่ใหม่ (); SimpledateFormat sdformat = ใหม่ simpledateFormat ("yyyymmddhhmmss"); // 24 ชั่วโมงสตริง lgtime = sdformat.format (วันที่); ตารางเวลา = lgtime + imgType; ไฟล์ uploadFile = ไฟล์ใหม่ (CTXPath + ตารางเวลา); ลอง {fileCopyutils.copy (file.getBytes (), uploadfile); } catch (ioexception e) {e.printstacktrace (); }} headphotopath สตริง = "photo/" + ตารางเวลา; Trainer.SetPhoto (หูฟัง); } ลอง {// สอบถามเทรนเนอร์ตาม USERID userId userId = frontshiRoutil.getUserId (); if (null! = userId) {trainer.setUserId (userId); // อัปเดตเทรนเนอร์ Avatar TrainerDBSVC.UPDATETRAINERPHOTO (เทรนเนอร์); }} catch (exception e) {e.printstacktrace (); } return ajaxResult.CreateSuccess (เทรนเนอร์); // <span style = "Font-Family: Arial, Helvetica, Sans-Serif;"> AjaxResult สามารถแก้ไขได้ </span>}/** * การสกัดกั้นการอัพโหลดภาพการทดสอบ * * @return */@requestmapping (value = "UploadPhototestEST @requestparam ("x1s") จำนวนเต็ม x1, @requestparam ("y1s") จำนวนเต็ม y1, @requestparam ("x2s") จำนวนเต็ม x2, @requestparam ("y2s") integer y2, @requestparam ("Imgx" {modelandView mav = leftmenu ("เปลี่ยนเส้นทาง:/เทรนเนอร์/อัปโหลด/touploadphoto"); เทรนเนอร์เทรนเนอร์ = null; ลอง {// สอบถามเทรนเนอร์ตาม USERID userId userId = frontshiRoutil.getUserId (); if (null! = userId) {trainer = trainerrepo.findone (userId); }} catch (exception e) {e.printstacktrace (); } ไฟล์ uploadfile = ไฟล์ใหม่ ("e:/rudongimage/" + trainer.getphoto ()); InputStream คือ = null; bufferedImage src = null; int w = -1; int h = -1; ลอง {is = new fileInputStream (uploadfile); src = javax.imageio.imageio.read (IS); w = src.getWidth (null); // รับความกว้างของภาพต้นฉบับ h = src.getheight (null); // รับความสูงของกราฟต้นทางคือ. close (); } catch (exception e) {e.printstacktrace (); } จำนวนเต็ม l = 0; // ใช้ขอบขนาดเล็กเป็นพื้นฐาน (ขนาดภาพดั้งเดิม) ถ้า (w <h) {l = w; } else {l = h; } // ใช้ขอบขนาดเล็กเป็นพื้นฐาน (ขนาดขนาดย่อ) จำนวนเต็ม L2 = 0; if (imgwidth <imgheight) {l2 = imgwidth; } else {l2 = imgheight; } จำนวนเต็ม x = (x1 * l)/ l2; // จุดเริ่มต้น x integer y = (y1 * l)/ l2; // จุดเริ่มต้น y integer xs = (x2 * l)/ l2; // จุดสิ้นสุด // ส่งคืนสตริงชื่อไฟล์ที่สกัดกั้น photoname = ""; imageUtil.cutimage (uploadfile, "e:/rudongimage/photo/", x, y, xs - x, ys - y); headphotopath สตริง = "photo/" + photoname; Trainer.SetPhoto (หูฟัง); // อัปเดตผู้ฝึกสอน Avatar TrainerDBSVC.UpDateRainerPhoto (เทรนเนอร์); กลับมา mav; -เครื่องมือ
นำเข้า Java.awt.Color; นำเข้า java.awt.graphics; นำเข้า java.awt.image; นำเข้า Java.awt.Rectangle; นำเข้า java.awt.image.bufferedimage; นำเข้า Java.io.File; นำเข้า Java.io.FileInputStream; นำเข้า java.io.filenotfoundException; นำเข้า java.io.ioException; นำเข้า Java.io.InputStream; นำเข้า Java.io.OutputStream; นำเข้า Java.util.Arrays; นำเข้า java.util.iterator; นำเข้า Javax.imageio.imageio; นำเข้า Javax.imageio.imagereadparam; นำเข้า Javax.imageio.imagereader; นำเข้า Javax.imageio.stream.imageInputStream; นำเข้า org.slf4j.logger; นำเข้า org.slf4j.loggerfactory; / *** คลาสเครื่องมือ Interceptor รูปภาพ*/ คลาสสาธารณะ ImageUtil {logger ส่วนตัว log = loggerFactory.getLogger (getClass ()); สตริงคงที่ส่วนตัว default_thumb_prevfix = "thumb_"; สตริงคงที่ส่วนตัว default_cut_prevfix = "cut_"; บูลีนแบบคงที่ส่วนตัว default_force = false; /*** <p> ชื่อเรื่อง: cutImage </p>* <p> คำอธิบาย: สกัดกั้นรูปภาพท้องถิ่นตามภาพต้นฉบับและขนาดของพืช </p>* @param srcimg ภาพแหล่งที่มา* @param เอาท์พุทรูปภาพออก* @param lect. เอาเอาท์พุท rect) {ถ้า (srcimg.exists ()) {java.io.fileinputstream fis = null; ImageInputStream IIS = NULL; ลอง {fis = new FileInputStream (SRCIMG); // imageio รองรับประเภทรูปภาพ: [BMP, BMP, JPG, JPG, WBMP, JPEG, PNG, PNG, JPEG, WBMP, GIF, GIF] ประเภทสตริง = array.toString (imageio.getReaderFormatNames () สตริงต่อท้าย = null; // รับภาพต่อท้ายหาก (srcimg.getName (). indexof (".")> -1) {suffix = srcimg.getName (). substring (srcimg.getName (). LastIndExof (") + 1); } // ประเภทและคำต่อท้ายของภาพเป็นตัวพิมพ์เล็กทั้งหมดจากนั้นพิจารณาว่าคำต่อท้ายนั้นถูกกฎหมายหรือไม่ (คำต่อท้าย == null || type.toLowerCase (). indexof (คำต่อท้าย. toLowerCase () + ",") <0) {log.info ("ขอโทษ กลับ ; } // แปลง FileInputStream เป็น ImageInputStream IIS = Imageio.CreateImageInputStream (FIS); // รับ imageReader ของประเภทนี้ตามประเภทรูปภาพ imageReader reader = imageio.getimagereadersbysuffix (คำต่อท้าย) .next (); Reader.setInput (IIS, TRUE); imageReadParam param = reader.getDefaulTreadParam (); param.setSourceRegion (rect); bufferedImage bi = reader.read (0, param); Imageio.write (bi, ต่อท้าย, เอาต์พุต); } catch (filenotfoundException e) {e.printStackTrace (); } catch (ioexception e) {e.printstacktrace (); } ในที่สุด {ลอง {ถ้า (fis! = null) fis.close (); ถ้า (iis! = null) iis.close (); ถ้า (เอาต์พุต! = null) output.close (); } catch (ioexception e) {e.printstacktrace (); }}}} else {log.info ("ภาพ SRC ไม่มีอยู่"); }} โมฆะสาธารณะ cutImage (ไฟล์ srcimg, เอาท์พุทเอาท์พุทสตรีม, int x, int y, ความกว้าง int, ความสูง int) {cutImage (srcimg, เอาต์พุต, java.awt.rectangle ใหม่ (x, y, ความกว้าง, ความสูง)); } โมฆะสาธารณะ cutImage (ไฟล์ srcimg, สตริง destimgpath, java.awt.rectangle rect) {ไฟล์ destimg = ไฟล์ใหม่ (destimgpath); if (destimg.exists ()) {string p = destimg.getPath (); ลอง {ถ้า (! destimg.isdirectory ()) p = destimg.getParent (); if (! P.Endswith (file.Sparator)) p = p + file.Sparator; cutImage (srcimg, java.io.Io.FileOutputStream (p + default_cut_prevfix + "_" + java.util.date (). getTime () + "_" + srcimg.getName ()), rect); } catch (filenotfoundexception e) {log.info ("ภาพปลายทางไม่มีอยู่"); }} else log.info ("โฟลเดอร์ภาพปลายทางไม่มีอยู่"); } โมฆะสาธารณะ cutImage (ไฟล์ srcimg, สตริง destimg, int x, int y, ความกว้าง int, ความสูง int) {cutimage (srcimg, destimg, java.awt.rectangle ใหม่ (x, y, ความกว้าง, ความสูง)); } โมฆะสาธารณะ cutimage (สตริง srcimg, สตริง destimg, int x, int y, ความกว้าง int, ความสูง int) {cutimage (ไฟล์ใหม่ (srcimg), destimg, java.awt.rectangle ใหม่ (x, y, ความกว้าง, ความสูง)); }/*** <p> ชื่อเรื่อง: ThumbnailImage </p>* <p> คำอธิบาย: สร้างรูปขนาดย่อตามเส้นทางรูปภาพ </p>* @param imagepath เส้นทางภาพต้นฉบับ* @param w กว้างความกว้าง* @param h thumbnail ความสูง* @param prevfix FALSE, รูปขนาดย่อที่ดีที่สุดถูกสร้างขึ้น) */ โมฆะสาธารณะรูปแบบย่อ (ไฟล์ SRCIMG, เอาต์พุตเอาท์พุทสตรีม, int w, int h, สตริง prevfix, แรงบูลีน) {ถ้า (srcimg.exists ()) jpeg, wbmp, gif, gif] ประเภทสตริง = arrays.toString (imageio.getReaderFormatNames ()) แทนที่ ("]", ","); สตริงต่อท้าย = null; // รับภาพต่อท้ายหาก (srcimg.getName (). indexof (".")> -1) {suffix = srcimg.getName (). substring (srcimg.getName (). LastIndExof (") + 1); } // ประเภทและคำต่อท้ายของภาพเป็นตัวพิมพ์เล็กทั้งหมดจากนั้นพิจารณาว่าคำต่อท้ายนั้นถูกกฎหมายหรือไม่ (คำต่อท้าย == null || type.toLowerCase (). indexof (คำต่อท้าย. toLowerCase () + ",") <0) {log.info ("ขอโทษ กลับ ; } log.info ("ขนาดของภาพเป้าหมายความกว้าง: {}, ความสูง: {}.", w, h); image img = imageio.read (srcimg); // ค้นหามาตราส่วนขนาดย่อที่เหมาะสมที่สุดตามภาพต้นฉบับและมาตราส่วนรูปย่อที่ต้องการถ้า (! force) {int width = img.getWidth (null); ความสูง int = img.getheight (null); if ((width*1.0)/w <(ความสูง*1.0)/h) {ถ้า (width> w) {h = integer.parseint (java.text.decimalformat ใหม่ ("0") รูปแบบ (ความสูง*w/(ความกว้าง*1.0))); log.info ("เปลี่ยนความสูงของภาพความกว้าง: {}, ความสูง: {}.", w, h); }} else {ถ้า (ความสูง> h) {w = integer.parseint (java.text.decimalformat ("0"). รูปแบบ (ความกว้าง * h/(ความสูง * 1.0)); log.info ("เปลี่ยนความกว้างของภาพ, ความกว้าง: {}, ความสูง: bufferedimage.type_int_rgb); System.out.println ("สร้างภาพย่อล้มเหลว"+e); if (! srcimg.isdirectory ()) p = srcimg.getparent (); (FilenotFoundException E) {log.info ("ภาพปลายทางไม่มีอยู่"+e); }} โมฆะสาธารณะ ThumbnailImage (String ImagePath, int w, int h, สตริง prevfix, แรงบูลีน) {ไฟล์ srcimg = ไฟล์ใหม่ (imagepath); Thumbnailimage (Srcimg, W, H, Prevfix, Force); } โมฆะสาธารณะแบบย่อ (String imagepath, int w, int h, แรงบูลีน) {Thumbnailimage (imagePath, W, H, default_thumb_prevfix, default_force); } โมฆะสาธารณะ ThumbnailImage (String imagePath, int w, int h) {ThumbnailImage (ImagePath, W, H, default_force); } โมฆะสาธารณะ readusingImageEder (สตริง SRC, สตริง dest, int w, int h) โยนข้อยกเว้น {// รับตัวอ่านภาพตัวอ่านภาพตัวอ่าน = imageio.getImageEdersByFormatName ("PNG"); imageReader reader = (imageReader) readers.next (); // รับ Image Reader INLOW INTURNISTREAM SORTOR = ใหม่ FileInputStream (SRC); ImageInputStream IIS = imageio.createImageInputStream (แหล่งที่มา); Reader.setInput (IIS, TRUE); // พารามิเตอร์รูปภาพ imageReadParam param = reader.getDefaultreadParam (); // 100, 200 เป็นตำแหน่งเริ่มต้นที่ซ้ายบน 300 คือความกว้าง 300 ซึ่งคือ 300 จาก 100 ซึ่งคือ 100 ~ 400 ในแนวนอน ในทำนองเดียวกันพื้นที่ 200 ~ 350 ในแนวตั้งใช้ความสูง 150 // สี่เหลี่ยมผืนผ้าสี่เหลี่ยม = สี่เหลี่ยมใหม่ (100, 200, 300, 150); // int hh = 0; ถ้า (h> 100) hh = (h - 100) / 3; สี่เหลี่ยมผืนผ้าสี่เหลี่ยม = สี่เหลี่ยมใหม่ (0, HH, 227, 100); param.setSourceRegion (rect); bufferedImage bi = reader.read (0, param); imageio.write (bi, "jpg", ไฟล์ใหม่ (dest)); } โมฆะคงที่สาธารณะหลัก (สตริง [] args) พ่นข้อยกเว้น {// imageUtil ใหม่ (). ThumbnailImage ("IMGS/tulips.jpg", 150, 100); // ใหม่ imageUtil (). cutImage ("imgs/tulips.jpg", "imgs", 250, 70, 300, 400); // ใหม่ imageUtil (). readusingimagereader ("e: //rudongimage/photo/20160302090226.png", "e: //rudongimage/photo/2.png", 227, 163); -การกำหนดค่า XML
<bean id = "multipartresolver" class = "org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!- หนึ่งในคุณสมบัติที่มีอยู่; ขนาดไฟล์สูงสุดในไบต์ <property name = "MaxUploadSize" value = "9999999999"/>-> </ebean>
การเชื่อมต่อปลั๊กอิน
http://download.csdn.net/download/u014596302/9572377
มีฟังก์ชั่นที่น่าเกลียดหากไม่ได้ปรับรูปแบบ