关于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();//获取项目的绝对路径  
         13         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();//转换后存入数据库
 30         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 图片  48      * @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)); 
 72          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>