关于bootstrap中cropper的截图上传问题
之前做一个关于截图的东东，搞了好久终于弄好了，其主要关键是把前端截图的数据（x坐标，y坐标，宽度，高度和旋转角度）传到后台，然后在后台对图片做相关处理，记录一下方便以后查看。
后台配置为ssm。
Java代码：
1 /** 2 * headers="content-type=multipart/*"（必填），avatar_file（name）,avatar_data(截图数据) 3 */ 4 @RequestMapping(params = "method=picture",headers="content-type=multipart/*",method=RequestMethod.POST) 5
6 public @ResponseBody Map picture(@RequestParam("avatar_file")MultipartFile file ,
String avatar_data,HttpServletRequest request){ 7 Map map=new HashMap<>(); 8 Map resultMap=new HashMap<>(); 9 try { 10 11 String nodepath = this.getClass().getClassLoader().getResource("/").getPath();//获取项目的绝对路径 12 13 String[] str1 = nodepath.split("wtpwebapps"); 14 int empempid"); 15 String filename=file.getOriginalFilename(); 16 String prefix = filename.substring((filename.lastIndexOf(".")+1));//获取图片后缀 17 System.err.println("prefix=="+prefix); 18 String[] str=avatar_data.split(","); 19 int x = (int)Math.floor(Double.parseDouble(str[0].split(":")[1]));//获取截取的x坐标 20 int y = (int)Math.floor(Double.parseDouble(str[1].split(":")[1]));//获取截取的y坐标 21 int h = (int)Math.floor(Double.parseDouble(str[2].split(":")[1])); //获取截取的高度 22 int w = (int)Math.floor(Double.parseDouble(str[3].split(":")[1])); //获取截取的宽度 23 int r = Integer.parseInt(str[4].split(":")[1].replaceAll("}", ""));//获取旋转的角度 24 BufferedImage cutImage = PersonalCenterController.cutImage(file,x,y,w,h,prefix,str1[0]); 25 BufferedImage rotateImage = PersonalCenterController.rotateImage(cutImage, r); 26 ByteArrayOutputStream out = new ByteArrayOutputStream(); 27 boolean flag = ImageIO.write(rotateImage, prefix, out); 28 byte[] b = out.toByteArray();//转换后存入数据库 29 30 map.put("in", b); 31 map.put("empid", empid); 32 int i = pcs.Pictureupload(map); 33 if(i>0){ 34 resultMap.put("result", "success"); 35 }else{ 36 resultMap.put("result", "defeat"); 37 } 38 } catch (Exception e) { 39 resultMap.put("result", "error"); 40 } 41 return resultMap; 42 } 43 44 45 /*** 46 * 剪裁图片 47 * @param file 图片 48 * @param dest 路径 49 * @param x 起点横坐标 50 * @param y 纵坐标 51 * @param w 长 52 * @param h 高 53 * @throws IOException 54 * @date 55 */ 56 public static BufferedImage cutImage(MultipartFile file,int x,int y,int w,int h,
String prefix,String dest) { 57 58 Iterator iterator = ImageIO.getImageReadersByFormatName(prefix); 59 dest=dest+"/wtpwebapps/pic";//剪切图片需要依赖一个本地路径（空文件夹即可） 60 System.err.println(dest); 61 try { 62 ImageReader reader = (ImageReader)iterator.next(); 63 InputStream in = file.getInputStream();//转换成输入流 64 ImageInputStream iis = ImageIO.createImageInputStream(in); 65 reader.setInput(iis, true); 66 ImageReadParam param = reader.getDefaultReadParam(); 67 Rectangle rect = new Rectangle(x, y, w,h); 68 param.setSourceRegion(rect); 69 BufferedImage bi = reader.read(0,param); 70 ImageIO.write(bi, prefix, new File(dest)); 71 72 return bi; 73 } catch (Exception e) { 74 } 75 return null; 76 } 77 /*** 78 * 图片旋转指定角度 79 * @param bufferedimage 图像 80 * @param degree 角度 81 * @return 82 * @date 83 */ 84 public static BufferedImage rotateImage(BufferedImage bufferedimage, int degree) { 85 int w = bufferedimage.getWidth(); 86 int h = bufferedimage.getHeight(); 87 int type = bufferedimage.getColorModel().getTransparency(); 88 BufferedImage img; 89 Graphics2D graphics2d; 90 (graphics2d = (img = new BufferedImage(w, h, type)) 91 .createGraphics()).setRenderingHint( 92 RenderingHints.KEY_INTERPOLATION, 93 RenderingHints.VALUE_INTERPOLATION_BILINEAR); 94 graphics2d.setPaint(Color.WHITE); 95 graphics2d.fillRect(0, 0, w, h); 96 graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2); 97 graphics2d.drawImage(bufferedimage, 0, 0,Color.WHITE, null); 98 graphics2d.dispose(); 99 return img; 100 }
html代码：
在前端页面采用form表单提交的方式，当表单中存在文件时，注意添加 enctype='multipart/form-data' 这么个玩意，主要是用来设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据。
1 <div > 2 <div class="avatar-view" > 3 <img /> <!-- 显示图片的路径，我保存在数据库中的，所有填写数据库的查询即可 --> 4 5 </div> 6 <!-- Cropping modal --> 7 <div class="modal fade" 8 aria-labelledby="avatar-modal-label" role="dialog" 9 tabindex="-1"> 10 <div class="modal-dialog modal-lg"> 11 <div class="modal-content"> 12 <form class="avatar-form" action='' enctype='multipart/form-data' method='post' name="form">
<!-- action填写后台路径，不用说都知道。关键是enctype='multipart/form-data'必须写。 --> 13 <div class="modal-header"> 14 <button class="close" data-dismiss="modal" type="button">×</button> 15 <h4 class="modal-title" >更换头像</h4> 16 </div> 17 <div class="modal-body"> 18 <div class="avatar-body"> 19 <!-- Upload image and data --> 20 <div class="avatar-upload"> 21 <input class="avatar-src" name="avatar_src" type="hidden" /> 22 <input class="avatar-data" name="avatar_data" type="hidden" /> 23 <label for="avatarInput">头像上传</label> 24 <input class="avatar-input" /> 25 26 27 </div> 28 <!-- Crop and preview --> 29 <div class="row"> 30 <div class="col-md-9"> 31 <div class="avatar-wrapper" ></div> 32 </div> 33 <div class="col-md-3"> 34 <div class="avatar-preview preview-lg"></div> 35 <div class="avatar-preview preview-md"></div> 36 <div class="avatar-preview preview-sm"></div> 37 </div> 38 </div> 39 40 <div class="row avatar-btns"> 41 <div class="col-md-9"> 42 <div class="btn-group"> 43 <button class="btn btn-primary btn-sm" 44 data-method="rotate" data-option="-90" type="button" 45 title="Rotate -90 degrees">旋转-90度</button> 46 <button class="btn btn-primary btn-sm" 47 data-method="rotate" data-option="-45" type="button">旋转-45度</button> 48 </div> 49 <div class="btn-group"> 50 <button class="btn btn-primary btn-sm" 51 data-method="rotate" data-option="90" type="button" 52 title="Rotate 90 degrees">旋转90度</button> 53 <button class="btn btn-primary btn-sm" 54 data-method="rotate" data-option="45" type="button">旋转45度</button> 55 </div> 56 </div> 57 <div class="col-md-3"> 58 <button class="btn btn-primary btn-block avatar-save" 59 type="submit" >完成</button> 60 </div> 61 </div> 62 63 <div class="row avatar-btns"> 64 <div class="col-md-12"> </div> 65 66 67 </div> 68 </div> 69 </div> 70 </form> 71 </div> 72 </div> 73 </div> 74 <!-- /.modal --> 75 76 <!-- Loading state --> 77 <div class="loading" aria-label="Loading" role="img" 78 tabindex="-1"></div> 79 </div>