Este artigo compartilha o código específico do SpringMVC combinado com o JCROP para realizar o corte de imagens para sua referência. O conteúdo específico é o seguinte
1. Página JSP:
<forma name = "form" action = "<%= request.getContextPath ()%>/uploaddemo/uploadHeadImage" Method = "post" Enctype = "Multipart/form-Data"> <div> <div> <div> <input type = "name =" imgfile "id =" fcuPLOAD "ebranking =" file "=" iMgfile "íds =" "s); id = "cutImg"/> <input type = "hidden" id = "x" name = "x"/> <type de entrada = "hidden" id = "y" name = "y"/> <type de entrada = "hidden" id = "w" name = "w"/> <input type = "hidden" = "hden" name = "h"/"/> <> OnClick = ""> Upload </botão> </div> </morm>
2. Situação de referência do componente JCROP:
<link rel = "Stylesheet" href = "<c: url value ="/Resources/uploadplugin/css/jquery.jcrop.css "/>" type = "text/css"> </link> <script type = "text/javasscript" 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> </script>
3. Como usar o Jcrop
<script type = "text/javascript"> // define uma API global, que é mais flexível para operar var api = null; function readURL (input) {if (input.files && input.files [0]) {var reader = new FileReader (); leitor.readasDataurl (input.files [0]); leitor.onload = function (e) {$ ('#cutimg'). removeattr ('src'); $ ('#cutimg'). att ('src', e.target.result); API = $ .JCROP ('#CUTIMG', {SetSelect: [20, 20, 200, 200], Aspectratio: 1, ONSELECT: UPDATECOORDS}); }; if (api! = indefinido) {api.destroy (); }} função updateCoords (obj) {$ ("#x"). val (obj.x); $ ("#y"). Val (obj.y); $ ("#w"). Val (obj.w); $ ("#h"). Val (obj.h); }; } </script> 4. Código de fundo:
@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) lança Exceção {System.out.println ("==========================================================/" SPORTCETTLETCONTTCONTEXT. "Recursos/Uploadimages/"; FileName.substring (FIM); Integer.parseint (x); int imageH = Integer.parseint (h); int imagew = Integer.parseint (w); // 这里开始截取操作 System.out.println ("========== ImagecutStart =============="); ImageCecut.imgcut (srcimagePath, imagex, imagey, imagew, imageH); System.out.println ("========== ImagEctendEnd ============="); }} retornar "User/UploadImg/Test"; } 5.
/** * Intercepted image* @param srcImageFile Original image address* @param x x coordinates during intercepting* @param y y coordinates during intercepting* @param desWidth Intercepted width* @param desHeight Intercepted height*/ public static void imgCut(String srcImageFile, int x, int y, int desWidth, int desHeight) { try { Image img; ImageFilter Cropfilter; BufferImage bi = imageio.read (novo arquivo (srcimagefile+"_ src.jpg"); int srcwidth = bi.getWidth (); int srcheight = bi.getHeight (); if (srcwidth> = deswidth && srcheight> = desheight) {imagem de imagem = bi.getScaledInstance (srcwidth, srcheight, image.scale_default); CropFilter = New CropImageFilter (X, Y, Deswidth, Deshight); img = Toolkit.getDefaultToolkit (). CreateImage (new FilterImagesource (image.getSource (), CropFilter)); Tag buffaredImage = new bufferImage (Deswidth, Desheight, bufferImage.type_int_rgb); Gráficos g = tag.getGraphics (); G.Drawimage (IMG, 0, 0, NULL); G.Dispose (); // Saída Arquivo Imageio.write (tag, "jpeg", novo arquivo (srcimagefile+"_ cut.jpg")); }} catch (Exceção e) {e.printStackTrace (); }} 6. Duas maneiras de usar o JCROP:
1.
jQuery ('#cropbox').2.
var api = $ .jcrop ('#cropbox', {Onnchange: showPreview, OnSelect: ShowPreview, aspetratio: 1});O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.