html
<#-- Upload avatar test page using imgareaselect plug-in-->
Finally uploaded this plugin to learn reference
<link rel="stylesheet" type="text/css" href="${frontRes}/imgareasel/css/imgareasel-animated.css" /> <link rel="stylesheet" type="text/css" href="${frontRes}/imgareasel/css/index.css" /> <script type="text/javascript" src="${frontRes}/imgareasel/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="${frontRes}/imgareaselect/jquery.imgareaselect.pack.js"></script> <script type="text/javascript" src="${frontRes}/imgareaselect/ajaxfileupload.js"></script> <script> function addFile(obj){ //document.getElementById('img').src = path; $.ajaxFileUpload({ url:'${huluUrl}/trainer/upload/ajaxUpload', //The server-side request address used for file upload secureuri: false, //Whether a security protocol is required, it is generally set to false fileElementId: 'photoFile', //Id of the file upload domain dataType: 'json', //Return value type is generally set to json success: function (data){//The server successfully responds to the processing function var infoArray = eval("("+data+")"); //The package data is parsed into json format var arr = infoArray.data; $("#img").attr("src","/images/"+arr.photo); }, error: function (){//The server response failure processing function alert('Communication with the server failed, please try again later!'); parent.location.reload(); } }); } function preview(img, selection) { if (!selection.width || !selection.height) return; //Preview var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; //var imgx = document.getElementById("photo").style.width; var imgx = parseInt($("#photo").css("width").split("px")[0]); var imgy = parseInt($("#photo").css("height").split("px")[0]); console.debug(imgx+"===="+imgy); $('#preview img').css({ width : Math.round(scaleX * imgx), height : Math.round(scaleY * imgy), marginLeft : -Math.round(scaleX * selection.x1), marginTop : -Math.round(scaleY * selection.y1) }); $('#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)); //Original width width $('#imgy').val(parseInt(imgy)); //Original height } $(function(selection) { var imgx = $("#photo").css("width").split("px")[0]; var imgy = $("#photo").css("height").split("px")[0]; var ares = 0; console.debug(imgx+"===="+imgy); if(imgx>imgy){ ares = imgy; }else{ ares = imgx; } var ias = $('#photo').imgAreaSelect({ aspectRatio : '1:1', handles : true, fadeSpeed : 200, onSelectChange : preview, instance : true }); ias.setSelection(0, 0, ares-1, ares-1);//Initialize the selection area ias.setOptions({ show : true }); ias.update(); $(".imgareaselect-outer").css("cursor","Crosshair"); $(".imgareaselect-outer").css("background-color","rgba(255,255,255,0.9)"); //Preview var scaleX = 100 / ares; var scaleY = 100 / ares; $('#preview img').css({ width : Math.round(scaleX * imgx), height : Math.round(scaleY * imgy), marginLeft : -Math.round(scaleX * 0), marginTop : -Math.round(scaleY * 0) }); //Backend data $('#x1s').val(0); $('#y1s').val(0); $('#x2s').val(ares-1); $('#y2s').val(ares-1); $('#imgx').val(imgx);//Original width width$('#imgy').val(imgy);//Original height }); </script> <div style="margin-top:20px;"> <div> <div> <div> <div> <h4 style="font-weight: 600;float: left">Upload the photo</h4> </div> <div> <div style="margin-top: 15px"> <div> <div> <div style="float: left"> <div role="button" style="position: relative; overflow: hidden;background-color: #8DC21F;color: #ffffff;"> <span>+Add a photo</span> <input id="photoFile" type="file" name="photoFile" onchange="addFile(this);" style="height:34px;position: absolute; right: 0px; top: 0px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"> </div> </div> <span style="float: left; margin-left: 15px; color: #888888"> <ul> <li>Suggest your photos</li> <li>Only support JPG, PNG, and GIF, the size does not exceed 5M</li> </ul> </span> </div> </div> <div> <div> <img src="/images/${(trainer.photo)!""}" id ="img"> </div> </div> </div> </div> <form action ="${huluUrl}/trainer/upload/uploadPhotoTest" method="post" enctype="multipart/form-data" > <input type="text" id="x1s" name = "x1s" value="-" /> <input type="text" id="y1s" name = "y1s" value="-" /> <input type="text" id="x2s" name = "x2s" value="-" /> <input type="text" id="y2s" name = "y2s" value="-" /> <input type="text" id="imgx" name = "imgx" value="-" /> <input type="text" id="imgy" name = "imgy" value="-" /> <div style="margin-top: 15px; margin-left: 80px"> <div> <div> <button type="button"id="chongxinshangchuan">Re-upload</button> </div> <div> <button type="submit" id="baocun"> Save</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="root"> <div id="main"> <div> <div> <div style="float: left; width: 50%;"> <p>Click and drag on the image to select an area.</p> <div> <div> <div style="line-height: 300px; text-align: center; overflow: hidden; z-index: 1001; width: 300px; height: 300px; position: relative; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; "> <img id="photo" src="/images/${(trainer.photo)!""}" style="max-height:300px;max-width: 300px;" /> </div> </div> </div> </div> </div> <div style="float: left; width: 50%;"> <p style="font-size: font-weight: bold; padding-left: 0.1em;">Selection Preview</p> <div> <div id="preview"> <img src="/images/${trainer.photo!}" /> </div> </div> <table> <thead> <tr> <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">Coordinates</th> <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">Dimensions</th> </tr> </thead> <tbody> <tr> <td><b>X<sub>1</sub>:</b></td> <td><input type="text" id="x1" value="-" /></td> <td><b>Width:</b></td> <td><input type="text" value="-" id="w" /></td> </tr> <tr> <td><b>Y<sub>1</sub>:</b></td> <td><input type="text" id="y1" value="-" /></td> <td><b>Height:</b></td> <td><input type="text" id="h" value="-" /></td> </tr> <tr> <td><b>X<sub>2</sub>:</b></td> <td><input type="text" id="x2" value="-" /></td> <td></td> <td><b>Y<sub>2</sub>:</b></td> <td></td> </tr> <td><b>Y<sub>2</sub>:</b></td> <td></td> </table> </div> </div> </div> </div> </div>java
//Showing the image requires a virtual path (tomcat) on the server server.xml<Context debug="0" docBase="G:/Image" path="/images" reloadable="true"/> Echo the data [java] view plain copy View code fragments on CODE derived to my code fragments/** * Skip to upload avatar 2 (can capture images) * * @return */ @RequestMapping(value = "toUploadPhoto", method = RequestMethod.GET) public ModelAndView toUploadTest() { ModelAndView mav = leftMenu("/trainer/upload/uploadPhoto"); // Trainer trainer = null; try { Long userId = FrontShiroUtil.getUserId(); if (null != userId) { trainer = trainerRepo.findOne(userId); trainerDbSvc.updateLastLoginTime(userId); } } catch (Exception e) { e.printStackTrace(); } mav.addObject("trainer", trainer); return mav; } // Local refresh upload image @RequestMapping("/ajaxUpload") public @ResponseBody AjaxResult ajaxUpload(MultipartHttpServletRequest request) { Trainer trainer = new Trainer(); // Get the first image (get the uploaded file according to the name of the front desk) MultipartFile file = request.getFile("photoFile"); if (file.getSize() != 0) { // Get the file name: String filename = file.getOriginalFilename(); String timeType = null; if (null != filename && !filename.equals("")) { String imgtype = filename.substring(filename.lastIndexOf(".")); // Get the path String ctxPath = "E:/rudongImage/photo/"; // Create file File dirPath = new File(ctxPath); if (!dirPath.exists()) { dirPath.mkdirs(); } // Take time as the file name Date date = new Date(); SimpleDateFormat sdformat = new SimpleDateFormat("yyyyMMddHHmmss");// 24-hour String LgTime = sdformat.format(date); timeType = LgTime + imgtype; File uploadFile = new File(ctxPath + timeType); try { FileCopyUtils.copy(file.getBytes(), uploadFile); } catch (IOException e) { e.printStackTrace(); } } String headPhotoPath = "photo/" + timeType; trainer.setPhoto(headPhotoPath); } try { // Query the trainer based on UserId Long userId = FrontShiroUtil.getUserId(); if (null != userId) { trainer.setUserId(userId); // Update the trainer avatar trainerDbSvc.updateTrainerPhoto(trainer); } } catch (Exception e) { e.printStackTrace(); } return AjaxResult.createSuccess(trainer); //<span style="font-family: Arial, Helvetica, sans-serif;">AjaxResult can be modified</span> } /** * Intercept area upload image test* * @return */ @RequestMapping(value = "uploadPhotoTest", method = RequestMethod.POST) public ModelAndView uploadPhotoTest(MultipartHttpServletRequest request, @RequestParam("x1s") Integer x1, @RequestParam("y1s") Integer y1, @RequestParam("x2s") Integer x2, @RequestParam("y2s") Integer y2, @RequestParam("imgx") Integer imgWidth, @RequestParam("imgy") Integer imgHeight) { ModelAndView mav = leftMenu("redirect:/trainer/upload/toUploadPhoto"); Trainer trainer = null; try { // Query the trainer based on UserId Long userId = FrontShiroUtil.getUserId(); if (null != userId) { trainer = trainerRepo.findOne(userId); } } catch (Exception e) { e.printStackTrace(); } File uploadFile = new File("E:/rudongImage/" + trainer.getPhoto()); InputStream is = null; BufferedImage src = null; int w = -1; int h = -1; try { is = new FileInputStream(uploadFile); src = javax.imageio.ImageIO.read(is); w = src.getWidth(null); // Get the source image width h = src.getHeight(null); // Get the source graph height is.close(); } catch (Exception e) { e.printStackTrace(); } Integer l = 0; // Use small edges as the basis (original image size) if (w < h) { l = w; } else { l = h; } // Use small edges as the basis (thumbnail size) Integer l2 = 0; if (imgWidth < imgHeight) { l2 = imgWidth; } else { l2 = imgHeight; } Integer x = (x1 * l) / l2;// Starting point x Integer y = (y1 * l) / l2;// Starting point y Integer xs = (x2 * l) / l2;// End point x Diagonal position Integer ys = (y2 * l) / l2;// End point y Diagonal position ImageUtil imageUtil = new ImageUtil(); // Return the intercepted file name String photoName = ""; imageUtil.cutImage(uploadFile, "E:/rudongImage/photo/", x, y, xs - x, ys - y); String headPhotoPath = "photo/" + photoName; trainer.setPhoto(headPhotoPath); // Update the trainer's avatar trainerDbSvc.updateTrainerPhoto(trainer); return mav; }Tools
import java.awt.Color; import java.awt.Graphics; import java.awt.Image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.util.Arrays; import java.util.Iterator; import javax.imageio.ImageIO; import javax.imageio.ImageReadParam; import javax.imageio.ImageReader; import javax.imageio.stream.ImageInputStream; import org.slf4j.Logger; import org.slf4j.LoggerFactory; /** * Image interceptor tool class*/ public class ImageUtil { private Logger log = LoggerFactory.getLogger(getClass()); private static String DEFAULT_THUMB_PREVFIX = "thumb_"; private static String DEFAULT_CUT_PREVFIX = "cut_"; private static Boolean DEFAULT_FORCE = false; /** * <p>Title: cutImage</p> * <p>Description: Intercept local pictures based on the original image and crop size</p> * @param srcImg Source image* @param output Image output stream* @param rect The coordinates and size of the part need to be intercepted*/ public void cutImage(File srcImg, OutputStream output, java.awt.Rectangle rect){ if(srcImg.exists()){ java.io.FileInputStream fis = null; ImageInputStream iis = null; try { fis = new FileInputStream(srcImg); // ImageIO supports image types: [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif] String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace("]", ","); String suffix = null; // Get the image suffix if(srcImg.getName().indexOf(".") > -1) { suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1); }// Type and image suffix are all lowercase, and then determine whether the suffix is legal if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+",") < 0){ log.info("Sorry, the image suffix is illegal. the standard image suffix is {}." + types); return ; } // Convert FileInputStream to ImageInputStream iis = ImageIO.createImageInputStream(fis); // Get ImageReader of this type according to the image type ImageReader reader = ImageIO.getImageReadersBySuffix(suffix).next(); reader.setInput(iis,true); ImageReadParam param = reader.getDefaultReadParam(); param.setSourceRegion(rect); BufferedImage bi = reader.read(0, param); ImageIO.write(bi, suffix, output); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } finally { try { if(fis != null) fis.close(); if(iis != null) iis.close(); if(output != null) output.close(); } catch (IOException e) { e.printStackTrace(); } } } }else { log.info("the src image is not exist."); } } public void cutImage(File srcImg, OutputStream output, int x, int y, int width, int height){ cutImage(srcImg, output, new java.awt.Rectangle(x, y, width, height)); } public void cutImage(File srcImg, String destImgPath, java.awt.Rectangle rect){ File destImg = new File(destImgPath); if(destImg.exists()){ String p = destImg.getPath(); try { if(!destImg.isDirectory()) p = destImg.getParent(); if(!p.endsWith(File.separator)) p = p + File.separator; cutImage(srcImg, new java.io.FileOutputStream(p + DEFAULT_CUT_PREVFIX + "_" + new java.util.Date().getTime() + "_" + srcImg.getName()), rect); } catch (FileNotFoundException e) { log.info("the dest image is not exist."); } }else log.info("the dest image folder is not exist."); } public void cutImage(File srcImg, String destImg, int x, int y, int width, int height){ cutImage(srcImg, destImg, new java.awt.Rectangle(x, y, width, height)); } public void cutImage(String srcImg, String destImg, int x, int y, int width, int height){ cutImage(new File(srcImg), destImg, new java.awt.Rectangle(x, y, width, height)); } /** * <p>Title: thumbnailImage</p> * <p>Description: Generate thumbnails based on image path</p> * @param imagePath Original image path* @param w Thumbnail width* @param h Thumbnail height* @param prevfix Generate the prefix of the thumbnail* @param force Whether to force thumbnails to be generated according to width and height (if false, the best scale thumbnail is generated) */ public void thumbnailImage(File srcImg, OutputStream output, int w, int h, String prevfix, boolean force){ if(srcImg.exists()){ try { // ImageIO Supported image types: [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif] String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace("]", ","); String suffix = null; // Get the image suffix if(srcImg.getName().indexOf(".") > -1) { suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1); }// Type and image suffix are all lowercase, and then determine whether the suffix is legal if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+",") < 0){ log.info("Sorry, the image suffix is illegal. the standard image suffix is {}." + types); return ; } log.info("target image's size, width:{}, height:{}.",w,h); Image img = ImageIO.read(srcImg); // Find the most suitable thumbnail scale based on the original image and the required thumbnail scale if(!force){ int width = img.getWidth(null); int height = img.getHeight(null); if((width*1.0)/w < (height*1.0)/h){ if(width > w){ h = Integer.parseInt(new java.text.DecimalFormat("0").format(height * w/(width*1.0))); log.info("change image's height, width:{}, height:{}.",w,h); } } else { if(height > h){ w = Integer.parseInt(new java.text.DecimalFormat("0").format(width * h/(height*1.0)); log.info("change image's width, width:{}, height:{}.",w,h); } } } BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics g = bi.getGraphics(); g.drawImage(img, 0, 0, w, h, Color.LIGHT_GRAY, null); g.dispose(); // Save the image in the original directory and prefix ImageIO.write(bi, suffix, output); output.close(); } catch (IOException e) { System.out.println("generate thumbnail image failed."+e); } }else{ System.out.println("the src image is not exist."); } } public void thumbnailImage(File srcImg, int w, int h, String prevfix, boolean force){ String p = srcImg.getAbsolutePath(); try { if(!srcImg.isDirectory()) p = srcImg.getParent(); if(!p.endsWith(File.separator)) p = p + File.separator; thumbnailImage(srcImg, new java.io.FileOutputStream(p + prevfix +srcImg.getName()), w, h, prevfix, force); } catch (FileNotFoundException e) { log.info("the dest image is not exist."+e); } } public void thumbnailImage(String imagePath, int w, int h, String prevfix, boolean force){ File srcImg = new File(imagePath); thumbnailImage(srcImg, w, h, prevfix, force); } public void thumbnailImage(String imagePath, int w, int h, boolean force){ thumbnailImage(imagePath, w, h, DEFAULT_THUMB_PREVFIX, DEFAULT_FORCE); } public void thumbnailImage(String imagePath, int w, int h){ thumbnailImage(imagePath, w, h, DEFAULT_FORCE); } public void readUsingImageReader(String src, String dest, int w, int h)throws Exception { // Get the image reader Iterator readers = ImageIO.getImageReadersByFormatName("png"); ImageReader reader = (ImageReader) readers.next(); // Get the image reader inflow InputStream source = new FileInputStream(src); ImageInputStream iis = ImageIO.createImageInputStream(source); reader.setInput(iis, true); // Image parameters ImageReadParam param = reader.getDefaultReadParam(); // 100, 200 is the starting position on the upper left, 300 is the width of 300, which is 300 from 100, which is 100~400 horizontally. Similarly, the area of 200~350 vertically takes the height of 150 // Rectangle rect = new Rectangle(100, 200, 300, 150);// int hh = 0; if (h > 100) hh = (h - 100) / 3; Rectangle rect = new Rectangle(0, hh, 227, 100); param.setSourceRegion(rect); BufferedImage bi = reader.read(0, param); ImageIO.write(bi,"jpg", new File(dest)); } public static void main(String[] args) throws Exception { //new ImageUtil().thumbnailImage("imgs/Tulips.jpg", 150, 100); //new ImageUtil().cutImage("imgs/Tulips.jpg","imgs", 250, 70, 300, 400); //new ImageUtil().readUsingImageReader("e://rudongImage/photo/20160302090226.png", "e://rudongImage/photo/2.png", 227, 163); } }xml configuration
<bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- one of the properties available; the maximum file size in bytes <property name="maxUploadSize" value="9999999999"/>--></bean>
Plugin Connection
http://download.csdn.net/download/u014596302/9572377
There are some ugly functions if the style is not adjusted.