Java 利用jquery库cropper完成图片裁剪功能，经测试可用！

最新推荐文章于 2024-08-16 08:05:40 发布

MCS_

最新推荐文章于 2024-08-16 08:05:40 发布

阅读量525

点赞数 1

分类专栏：软件开发-JAVA

软件开发-JAVA 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

[javascript]view plaincopy 
    
 一、导入 image cropper js和css样式  
   <link rel="stylesheet" href="${pageContext.request.contextPath}/css/imageCropper/assets/css/font-awesome.min.css">  
   <link rel="stylesheet" href="${pageContext.request.contextPath}/css/imageCropper/assets/css/bootstrap.min.css">  
   <link rel="stylesheet" href="${pageContext.request.contextPath}/css/imageCropper/dist/cropper.css">  
   <link rel="stylesheet" href="${pageContext.request.contextPath}/css/imageCropper/main.css">  
   <script src="${pageContext.request.contextPath }/js/imageCropper/assets/js/jquery.min.js"></script>  
   <script src="${pageContext.request.contextPath }/js/imageCropper/assets/js/bootstrap.min.js"></script>  
   <script src="${pageContext.request.contextPath }/js/imageCropper/dist/cropper.js"></script>  
   <script src="${pageContext.request.contextPath }/js/imageCropper/main.js"></script>  
   
 二、截取图片，创建canvas，上传到后台  
 function getImg(){  
       
   
   
      var $this = $("#getCroppedCanvasDefined");  
      var $image = $('#image');  
      var data = $this.data();  
       if ($image.data('cropper')) {  
           data = $.extend({}, data); // Clone a new one  
   
           if (typeof data.target !== 'undefined') {  
             $target = $(data.target);  
   
             if (typeof data.option === 'undefined') {  
               try {  
                 data.option = JSON.parse($target.val());  
               } catch (e) {  
                 console.log(e.message);  
               }  
             }  
           }  
       }    
   
     var result=$image.cropper("getCroppedCanvas", data.option, data.secondOption);  
      $('#getCroppedCanvasModal').find('.modal-body').html(result);  
     var canvas= $("canvas")[0];//拿到剪裁后的数据  
     var data=canvas.toDataURL(); //转成base64  
     console.info(data)  
      $.ajax( {  
             url:'${pageContext.request.contextPath}/testEditor/testImageCropper.action',  
             dataType:'json',  
             type: "POST",  
             data: {"image":data.toString()},  
             success: function () {  
               console.log('Upload success');  
             },  
             error: function () {  
               console.log('Upload error');  
             }  
           });  
       
       
       
 }  

[java]view plaincopy 
    
 三、上传到后台，存储到对应的路径  
   
 @RequestMapping(value = "testImageCropper"+ISystemConstant.SUFFIX_ACTION,method=RequestMethod.POST,   
             consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)  
     @ResponseBody  
     public Map<String,Object> testImageCropper(Model model, HttpServletRequest request,HttpServletResponse response){  
           
          Map<String,Object> result=new HashMap<String,Object>();  
         String filePath=pubParamService.getRootPath()+File.separator+"imageCropper"+File.separator;  
         String fileName=UUID.randomUUID().toString()+".png";  
            // 参数序列化  
         String image = request.getParameter("image");   //拿到字符串格式的图片  
         String PicName=fileName;  
         System.out.println(PicName);  
   
         // 只允许image  
         String header ="data:image";  
         String[] imageArr=image.split(",");  
         if(imageArr[0].contains(header)){//是img的  
       
       // 去掉头部  
         image=imageArr[1];  
         //image = image.substring(header.length());  
         // 写入磁盘  
         String success = "fail";  
         BASE64Decoder decoder = new BASE64Decoder();  
         try{  
                 byte[] decodedBytes = decoder.decodeBuffer(image);        //将字符串格式的image转为二进制流（biye[])的decodedBytes  
                 String imgFilePath =filePath+PicName;                        //指定图片要存放的位置  
                 File targetFile = new File(filePath);  
                 if(!targetFile.exists()){    
                     targetFile.mkdirs();    
                 }    
                   
                 FileOutputStream out = new FileOutputStream(imgFilePath);        //新建一个文件输出器，并为它指定输出位置imgFilePath  
                 out.write(decodedBytes); //利用文件输出器将二进制格式decodedBytes输出  
                 out.close();                        //关闭文件输出器  
                 success = "上传文件成功！";  
                 result.put("success", success);  
                 System.out.println("上传文件成功！");  
           
         }catch(Exception e){  
                 result.put("err", e.getMessage());  
         }  
           
         }  
         return result;  
     }    
       
       