SpringMVC combinado con JCROP para lograr el recorte de imágenes

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.