javaweb 项目 使用image cropper jquery插件 截图上传

一、导入 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');
    	    }
    	  });
    
	
	
}

三、上传到后台，存储到对应的路径

@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;
    }  
	
	

四、注意要是传递图片的小大大于2m,可能会出现数据传递不到后台的情况，这个时候请修改tomcat 的server.xml配置，增加maxPostSize=“0”，因为tomcat设置默认的传递的数据大小不能大于2m

https://github.com/fengyuanchen/cropper：image cropper  插件地址