關於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>