Este artículo comparte el código específico de SpringMVC combinado con JCROP para realizar el recorte de imágenes para su referencia. El contenido específico es el siguiente
1. Página JSP:
<form de nombre = "form" action = "<%= request.getContextPath ()%>/uploadDemo/uploadHeadImage" método = "post" enctype = "multipart/formy-data"> <div> <div> <div> <input type = "file" name = "imgfile" id = "fcupload" Oncle = "readurl (this);"/"<iMrc =" Id = "fcUpload" Oncle = "Readurl (this);"/"<IMRC =" Id = "fcUpload" 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 "id =" h "name =" h "/> </biv> </biv> onClick = ""> cargar </boton> </div> </form>
2. Situación de referencia de componentes JCROP:
<Link rel = "Stylesheet" href = "<c: url value ="/recursos/uploadplugin/css/jQuery.jcrop.css "/>" type = "text/css"> </ink> <script type = "text/javascript" src = "<c: url valor = "/recursos/uploadplugin/scripts/jQuery-1.8.3.js"/> "> </script> <script type =" text/javaScript "src =" <c: url value = "/recursos/uploadplugin/scripts/jquery.jcrop.js"/> "> </script>
3. Cómo usar JCROP
<script type = "text/javaScript"> // Definir una API global, que es más flexible para operar var api = null; function readUrl (input) {if (input.files && input.files [0]) {var lector = new FileReader (); lector.readasdataurl (input.files [0]); Reader.onload = function (e) {$ ('#cutimg'). removeattr ('src'); $ ('#cutimg'). attr ('src', e.target.result); api = $ .jcRrop ('#cutimg', {setSelect: [20, 20, 200, 200, 200], Aspectratio: 1, OnSelect: UpdateCoords}); }; if (api! = undefined) {api.destroy (); }} función updateCoords (obj) {$ ("#x"). Val (obj.x); $ ("#y"). Val (obj.y); $ ("#W"). Val (obj.w); $ ("#H"). Val (obj.h); }; } </script> 4. Código de fondo:
@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) lanza la excepción {System.out.println ("=================================================================================================== System.out.getServletContext (). "Recursos/uploadImages/"; FileName.Substring (0, end); Integer.ParseInt (x); int ImageH = Integer.ParseInt (H); int ImageW = Integer.ParseInt (W); // 这里开始截取操作 System.out.println ("========== ImageCutStart =============="); ImageCut.imgCut (srcImagePath, imagex, imagey, imageW, imageH); System.out.println ("=========== ImageCutend =============="); }} return "user/uploadImg/test"; } 5. ImageCut.Java Tool Class:
/ *** Imagen interceptada* @param srcImageFile Dirección de imagen original* @param x x coordenadas durante la interceptación* @param y y y coordenadas durante la interceptación* @param deswidth interceptado ancho* @param desheight altura interceptada*/ public static void imgcut (srciMagefile, intx, int y, int y, int ywewiTH). {Imagen img; ImageFilter CropFilter; BufferedImage bi = imageIO.Read (nuevo archivo (srcImageFile+"_ src.jpg")); int srcWidth = bi.getWidth (); int srcheight = bi.getheight (); if (srcwidth> = deswidth && srcheight> = desheight) {imagen image = bi.getScaledInstance (srcwidth, srcheight, image.scale_default); CropFilter = New CropImageFilter (X, Y, Deswidth, Desheight); img = Toolkit.getDefaultToolkit (). CreateImage (nuevo FilteredImageSource (image.getSource (), CropFilter)); TagedImage Tag = new BufferedImage (deswidth, desheight, bufferedImage.type_int_rgb); Gráficos g = tag.getGraphics (); G.DrawImage (img, 0, 0, nulo); G.Dispose (); // El archivo de salida imageIO.Write (etiqueta, "jpeg", nuevo archivo (srcImageFile+"_ Cut.jpg")); }} catch (Exception e) {E.PrintStackTrace (); }} 6. Dos formas de usar JCROP:
1.
jQuery ('#cropbox'). jcRop ({onchange: showcoords, onselect: showcoords});2.
var api = $ .jcRrop ('#cropbox', {onchange: showPreview, onselect: showPreview, aspectratio: 1});Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.