В этой статье используется конкретный код SpringMVC в сочетании с JCROP, чтобы реализовать обрезку изображения для вашей ссылки. Конкретный контент заключается в следующем
1. Страница JSP:
<form name = "form" action = "<%= request.getContextPath ()%>/uploaddemo/uploadHeadImage" method = "post" ectype = "multipry/form-data"> <div> <div> <div> <input type = "file" name = "imgfile" id = "fcupload" onchange = "readurl (this); id="cutimg"/> <input type="hidden" id="x" name="x"/> <input type="hidden" id="y" name="y"/> <input type="hidden" id="w" name="w"/> <input type="hidden" id="h" name="h"/> </div> </div> </div> <div> <button id="submit" onclick = ""> upload </button> </div> </form>
2. Справочная ситуация JCROP компонента:
<link rel = "styleSheet" href = "<c: url value ="/resources/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 = "/resources/uploadplugin/scripts/jquery.jcrop.js"/> </script>
3. Как использовать Jcrop
<script type = "text/javascript"> // определить глобальный API, который более гибкий для работы VAR API = null; function readurl (input) {if (input.files && input.files [0]) {var reater = 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], Aspectratio: 1, On Select: UpdateCoords}); }; if (api! = undefined) {api.destroy (); }} функция updateCoords (obj) {$ ("#x"). val (obj.x); $ ("#y"). val (obj.y); $ ("#w"). Val (obj.w); $ ("#h"). val (obj.h); }; } </script> 4. Фоновый код:
@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) Throws Exception {System.out.println ("=============================================================================================================== "Resources/uploadImage/"; filename.substring (0, end); Integer.parseint (x); int ImageH = integer.parseint (h); int imagew = integer.parseint (w); // 这里开始截取操作 System.out.println ("================================================================== ImageCut.imgcut (SrcimagePath, Imagex, Imagey, Imagew, Imageh); System.out.println ("========== ImageCutend ============================== }} return "user/uploadimg/test"; } 5. ImageCut.java Tool Class:
/ *** перехваченное изображение* @param srcimagefile исходный адрес изображения* @param x x координаты во время перехвата* @param y y координаты во время перехвата* @param deswidth перехваченная ширина* @param deshewer IMG; Imagefilter Cropfilter; BufferedImage bi = imageio.read (новый файл (srcimagefile+"_ src.jpg")); int srcwidth = bi.getWidth (); int srcheight = bi.getheight (); if (srcwidth> = deswidth && srcheight> = desheight) {image image = bi.getScaledInstance (srcwidth, srcheight, image.scale_default); Cropfilter = новый Cropimagefilter (x, y, deswidth, desheight); img = toolkit.getdefaulttoolkit (). CreateImage (New FilteredImagesource (image.getSource (), Cropfilter)); BufferedImage Tag = new BufferedImage (deswidth, desheight, bufferedimage.type_int_rgb); Graphics g = Tag.getGraphics (); g.drawimage (img, 0, 0, null); g.dispose (); // выходной файл imageio.write (Tag, "jpeg", новый файл (srcimagefile+"_ cut.jpg")); }} catch (Exception e) {e.printstackTrace (); }} 6. Два способа использования Jcrop:
1
jQuery ('#Cropbox'). Jcrop ({OnChange: ShowCoords, Onselect: ShowCoords});2
var api = $ .jcrop ('#cropbox', {onchange: showpreview, onselect: showpreview, aspectratio: 1});Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.