关于bootstrap中cropper的截图上传问题

之前做一个关于截图的东东，搞了好久终于弄好了，其主要关键是把前端截图的数据（x坐标，y坐标，宽度，高度和旋转角度）传到后台，然后在后台对图片做相关处理，记录一下方便以后查看。

后台配置为ssm。

Java代码：

     /**
      * headers="content-type=multipart/*"（必填），avatar_file（name）,avatar_data(截图数据)
      */
     @RequestMapping(params = "method=picture",headers="content-type=multipart/*",method=RequestMethod.POST)
   
　6     public  @ResponseBody Map picture(@RequestParam("avatar_file")MultipartFile file ,
　　　　　　　　String avatar_data,HttpServletRequest request){
         Map map=new HashMap<>();
         Map resultMap=new HashMap<>();
         try {

         String nodepath = this.getClass().getClassLoader().getResource("/").getPath();//获取项目的绝对路径
                  String[] str1 = nodepath.split("wtpwebapps");
         int empid=(int)request.getSession().getAttribute("empid");
         String filename=file.getOriginalFilename();
         String prefix = filename.substring((filename.lastIndexOf(".")+1));//获取图片后缀
         System.err.println("prefix=="+prefix);
         String[] str=avatar_data.split(",");
         int x = (int)Math.floor(Double.parseDouble(str[0].split(":")[1]));//获取截取的x坐标
         int y = (int)Math.floor(Double.parseDouble(str[1].split(":")[1]));//获取截取的y坐标
         int h = (int)Math.floor(Double.parseDouble(str[2].split(":")[1])); //获取截取的高度
         int w = (int)Math.floor(Double.parseDouble(str[3].split(":")[1])); //获取截取的宽度
         int r = Integer.parseInt(str[4].split(":")[1].replaceAll("}", ""));//获取旋转的角度
         BufferedImage cutImage = PersonalCenterController.cutImage(file,x,y,w,h,prefix,str1[0]);
         BufferedImage rotateImage = PersonalCenterController.rotateImage(cutImage, r);
          ByteArrayOutputStream out = new ByteArrayOutputStream();
          boolean flag = ImageIO.write(rotateImage, prefix, out);
          byte[] b = out.toByteArray();//转换后存入数据库
          map.put("in", b);
         map.put("empid", empid);
         int i = pcs.Pictureupload(map);
         if(i>0){
             resultMap.put("result", "success");
         }else{
             resultMap.put("result", "defeat");
         }
         } catch (Exception e) {
             resultMap.put("result", "error");
         }
         return resultMap;
     }

      /***
      * 剪裁图片
      * @param file 图片       * @param dest 路径
      * @param x  起点横坐标
      * @param y  纵坐标
      * @param w  长
      * @param h  高
      * @throws IOException
      * @date
      */
      public static BufferedImage cutImage(MultipartFile file,int x,int y,int w,int h,
　　　　　　String prefix,String dest) { 

          Iterator iterator = ImageIO.getImageReadersByFormatName(prefix);
          dest=dest+"/wtpwebapps/pic";//剪切图片需要依赖一个本地路径（空文件夹即可）
          System.err.println(dest);
          try {
          ImageReader reader = (ImageReader)iterator.next();
          InputStream in = file.getInputStream();//转换成输入流
          ImageInputStream iis = ImageIO.createImageInputStream(in);
          reader.setInput(iis, true);
          ImageReadParam param = reader.getDefaultReadParam();
          Rectangle rect = new Rectangle(x, y, w,h);
          param.setSourceRegion(rect);
          BufferedImage bi = reader.read(0,param);
          ImageIO.write(bi, prefix, new File(dest));
           return bi;
          } catch (Exception e) {
          }
          return null;
   }
      /***
       * 图片旋转指定角度
       * @param bufferedimage 图像
       * @param degree      角度
       * @return
       * @date
       */
      public static BufferedImage rotateImage(BufferedImage bufferedimage, int degree) {
             int w = bufferedimage.getWidth();
             int h = bufferedimage.getHeight();
             int type = bufferedimage.getColorModel().getTransparency();
             BufferedImage img;
             Graphics2D graphics2d;
             (graphics2d = (img = new BufferedImage(w, h, type))
                     .createGraphics()).setRenderingHint(
                     RenderingHints.KEY_INTERPOLATION,
                     RenderingHints.VALUE_INTERPOLATION_BILINEAR);
             graphics2d.setPaint(Color.WHITE);
             graphics2d.fillRect(0, 0, w, h);
             graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);
             graphics2d.drawImage(bufferedimage, 0, 0,Color.WHITE, null);
             graphics2d.dispose();
             return img;
         }  

html代码：

在前端页面采用form表单提交的方式，当表单中存在文件时，注意添加 enctype='multipart/form-data'  这么个玩意，主要是用来设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据。

 1 　<div id="crop-avatar">
 2    <div class="avatar-view" id="imgshow">
 3      <img id="image" src="" />  <!-- 显示图片的路径，我保存在数据库中的，所有填写数据库的查询即可 -->
 4
 5     </div>
 6     <!-- Cropping modal -->
 7     <div class="modal fade" id="avatar-modal" aria-hidden="true"
 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">&times;</button>
15              <h4 class="modal-title" id="avatar-modal-label">更换头像</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" id="avatarInput" name="avatar_file" type="file" />
25
26
27              </div>
28            <!-- Crop and preview -->
29            <div class="row">
30              <div class="col-md-9">
31               <div class="avatar-wrapper" id="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" id="btn">完成</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>