cropper裁剪图片并上传

深碍√TFBOYSˉ_ 2022-05-17 09:48 283阅读 0赞

**引入cropper所依赖的js和css，可在官网下载。**

我的资源地址：[https://download.csdn.net/download/rexueqingchun/10593965][https_download.csdn.net_download_rexueqingchun_10593965]

**把裁剪的图片转化为base64上传**

**   **前台程序

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/cropper.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/cropper.js"></script>
    <script type="text/javascript">
    $(function () {
    	  var console = window.console || { log: function () {} };
    	  var URL = window.URL || window.webkitURL;
    	  var $image = $('#image');
    	  var $download = $('#download');
    	  var $dataX = $('#dataX');
    	  var $dataY = $('#dataY');
    	  var $dataHeight = $('#dataHeight');
    	  var $dataWidth = $('#dataWidth');
    	  var $dataRotate = $('#dataRotate');
    	  var $dataScaleX = $('#dataScaleX');
    	  var $dataScaleY = $('#dataScaleY');
    	  var options = {
    	        aspectRatio: 1 / 1, //裁剪框的宽高比
    	        viewMode: 1, //视图模式,默认为0:无限制,1:截取框不能移到图片外部,2:不全部铺满背景,3:全部铺满背景
    	        dragMode: 'move',//拖拽模式,默认为crop:产生一个新的裁剪框,可改变大小,move:可移动图片,none:不可移动图片
    	        preview: '.img-preview', //添加额外的元素(容器)以供预览
    	        autoCropArea: 0.5, //定义初始化裁剪框对比图片的比例大小,默认为0.8
    			cropBoxResizable: true, //是否可以调整剪裁框的大小
    			cropBoxMovable: true, //是否可以移动剪裁框
    	        crop: function (e) {
    	          $dataX.val(Math.round(e.x));
    	          $dataY.val(Math.round(e.y));
    	          $dataHeight.val(Math.round(e.height));
    	          $dataWidth.val(Math.round(e.width));
    	          $dataRotate.val(e.rotate);
    	          $dataScaleX.val(e.scaleX);
    	          $dataScaleY.val(e.scaleY);
    	        }
    	      };
    	  var originalImageURL = $image.attr('src');
    	  var uploadedImageName = '';
    	  var uploadedImageType = 'image/jpeg';
    	  var uploadedImageURL;
    
    	  // Cropper
    	  $image.on({
    	    ready: function (e) {
    	      //console.log(e.type);
    	    },
    	    cropstart: function (e) {
    	      //console.log(e.type, e.action);
    	    },
    	    cropmove: function (e) {
    	      //console.log(e.type, e.action);
    	    },
    	    cropend: function (e) {
    	      //console.log(e.type, e.action);
    	    },
    	    crop: function (e) {
    	      //console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
    	    },
    	    zoom: function (e) {
    	      //console.log(e.type, e.ratio);
    	    }
    	  }).cropper(options);
    
    	  // Buttons
    	  if (!$.isFunction(document.createElement('canvas').getContext)) {
    	    $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
    	  }
    	  if (typeof document.createElement('cropper').style.transition === 'undefined') {
    	    $('button[data-method="rotate"]').prop('disabled', true);
    	    $('button[data-method="scale"]').prop('disabled', true);
    	  }
    
    	  // Download
    	  if (typeof $download[0].download === 'undefined') {
    	    $download.addClass('disabled');
    	  }
    
    	  // Methods
    	  $('.docs-buttons').on('click', '[data-method]', function () {
    	    var $this = $(this);
    	    var data = $this.data();
    	    var cropper = $image.data('cropper');
    	    var cropped;
    	    var $target;
    	    var result;
    
    	    if ($this.prop('disabled') || $this.hasClass('disabled')) {
    	      return;
    	    }
    
    	    if (cropper && data.method) {
    	      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);
    	          }
    	        }
    	      }
    
    	      cropped = cropper.cropped;
    
    	      switch (data.method) {
    	        case 'rotate': //旋转
    	          if (cropped && options.viewMode > 0) {
    	            $image.cropper('clear');
    	          }
    
    	          break;
    
    	        case 'getCroppedCanvas':
    	          if (uploadedImageType === 'image/jpeg') {
    	            if (!data.option) {
    	              data.option = {};
    	            }
    
    	            data.option.fillColor = '#fff';
    	          }
    
    	          break;
    	      }
    
    	      result = $image.cropper(data.method, data.option, data.secondOption);
    
    	      switch (data.method) {
    	        case 'rotate':
    	          if (cropped && options.viewMode > 0) {
    	            $image.cropper('crop');
    	          }
    
    	          break;
    
    	        case 'scaleX':
    	        case 'scaleY':
    	          $(this).data('option', -data.option);
    	          break;
    
    	        case 'getCroppedCanvas':
    	          if (result) {
    	            // Bootstrap's Modal
    	            $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
    
    	            if (!$download.hasClass('disabled')) {
    	              download.download = uploadedImageName;
    	              $download.attr('href', result.toDataURL(uploadedImageType));
    	            }
    	          }
    
    	          break;
    
    	        case 'destroy':
    	          if (uploadedImageURL) {
    	            URL.revokeObjectURL(uploadedImageURL);
    	            uploadedImageURL = '';
    	            $image.attr('src', originalImageURL);
    	          }
    
    	          break;
    	      }
    
    	      if ($.isPlainObject(result) && $target) {
    	        try {
    	          $target.val(JSON.stringify(result));
    	        } catch (e) {
    	          console.log(e.message);
    	        }
    	      }
    
    	    }
    	  });
    
    	  // Import image
    	  var $inputImage = $('#inputImage');
    
    	  if (URL) {
    	    $inputImage.change(function () {
    	      var files = this.files;
    	      var file;
    
    	      if (!$image.data('cropper')) {
    	        return;
    	      }
    
    	      if (files && files.length) {
    	        file = files[0];
    
    	        if (/^image\/\w+$/.test(file.type)) {
    	          uploadedImageName = file.name;
    	          uploadedImageType = file.type;
    
    	          if (uploadedImageURL) {
    	            URL.revokeObjectURL(uploadedImageURL);
    	          }
    
    	          uploadedImageURL = URL.createObjectURL(file);
    	          $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
    	          $inputImage.val('');
    	        } else {
    	          window.alert('Please choose an image file.');
    	        }
    	      }
    	    });
    	  } else {
    	    $inputImage.prop('disabled', true).parent().addClass('disabled');
    	  }
    
    	  //上传图片
    	  $("#getCroppedCanvas").on("click", function () {
      		var cas = $('#image').cropper('getCroppedCanvas');
    		if(cas == null){
    			alert("请选择图片");
    			return false;
    		}else{
    			var base64url = cas.toDataURL('image/jpeg');
    			$.ajax({    
    				url : 'wap_ajbj_upload_zm.htm',  
    		        dataType:'json',  
    		        type: "post",    
    		        data: {
    		        	fileName : uploadedImageName,
    		        	imgBase64 : base64url
    		        },       
    		        success: function (data) { 
    		        	if(data.result == 'success'){
    		        		alert("上传成功");
    		        	}  	
    		        } 
    			});
    		} 
    	  })
    });
    </script>
    </head>
    <body>
      <div class="container" style="margin-top: 10px;">
        <div class="row">
          <div class="col-md-9">
            <div class="img-container">
              <img id="image" >
            </div>
          </div>
          <div class="col-md-3">
            <div class="docs-preview clearfix">
              <div class="img-preview preview-lg"></div>
            </div>
    
            <div class="docs-data">
              <div class="input-group input-group-sm">
                <span class="input-group-prepend">
                  <label class="input-group-text" for="dataWidth">宽度</label>
                </span>
                <input type="text" class="form-control" id="dataWidth" disabled>
                <span class="input-group-append">
                  <span class="input-group-text">像素</span>
                </span>
              </div>
              <div class="input-group input-group-sm">
                <span class="input-group-prepend">
                  <label class="input-group-text" for="dataHeight">高度</label>
                </span>
                <input type="text" class="form-control" id="dataHeight" disabled>
                <span class="input-group-append">
                  <span class="input-group-text">像素</span>
                </span>
              </div>
            </div>
          </div>
        </div>
    
        <div class="row">
          <div class="col-md-9 docs-buttons">
            <div class="btn-group">
              <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate Left">
                <span class="docs-tooltip" data-animation="false" title="向左旋转">
                  <span class="fa fa-rotate-left">向左旋转</span>
                </span>
              </button>
              <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate Right">
                <span class="docs-tooltip" data-animation="false" title="向右旋转">
                  <span class="fa fa-rotate-right">向右旋转</span>
                </span>
              </button>
            </div>
            
            <div class="btn-group">
            	<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
                <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
                <span class="docs-tooltip" data-animation="false" title="打开本地图片">
                  <span class="fa fa-upload">选择图片</span>
                </span>
              </label>
            </div>
    
            <div class="btn-group btn-group-crop">
              <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ "maxWidth": 4096, "maxHeight": 4096 }">
                <span class="docs-tooltip" data-animation="false" title="获取图片">
                  	获取图片
                </span>
              </button>
            </div>
            
            
            <div class="btn-group btn-group-crop">
              <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ "width": 200, "height": 200 }">
                <span class="docs-tooltip" data-animation="false" title="200*200">
                  200*200
                </span>
              </button>
            </div>
            
            <div class="btn-group btn-group-crop">
              <button id="getCroppedCanvas" type="button" class="btn btn-success" >
                <span class="docs-tooltip" data-animation="false" title="上传图片">
                  	上传图片
                </span>
              </button>
            </div>
    
            
            <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="getCroppedCanvasTitle">图片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body"></div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <a class="btn btn-primary" id="download" href="javascript:void(0);" >下载</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
    </body>
    </html>

**  **后台程序

private String filePath = LxwmController.class.getResource("/").getPath().split("WEB-INF")[0]+ "upload/";
    	
    	@RequestMapping(value = "wap_ajbj_upload_zm.htm", method = {RequestMethod.GET, RequestMethod.POST })
    	@ResponseBody
    	public Map<String, Object> wap_ajbj_upload_zm(HttpServletRequest request) throws Exception {
    		Map<String, Object> result = new HashMap<String, Object>();
    		String fileName = request.getParameter("fileName");
    		fileName = System.currentTimeMillis() + "." + fileName.substring(fileName.lastIndexOf(".") + 1);
    		String imgBase64 = request.getParameter("imgBase64");
    		imgBase64 = imgBase64.split(",")[1];
    		GenerateImage(imgBase64,filePath + "/ajbj/zm/"+fileName);
    		result.put("result", "success");
    		return result;
    	}
    	
    	/**
    	 * @Description: 将base64编码字符串转换为图片
    	 * @param imgStr base64编码字符串
    	 * @param path 图片路径-具体到文件
    	*/ 
        public static boolean GenerateImage(String imgStr,String imgFilePath){     
            if (imgStr == null) //图像数据为空  
                return false;  
            BASE64Decoder decoder = new BASE64Decoder();  
            try{  
                //Base64解码  
                byte[] b = decoder.decodeBuffer(imgStr);  
                for(int i=0;i<b.length;++i){  
                    if(b[i] < 0){//调整异常数据  
                        b[i] += 256;  
                    }  
                }  
                OutputStream out = new FileOutputStream(imgFilePath);      
                out.write(b);  
                out.flush();  
                out.close();  
                return true;  
            }   
            catch (Exception e){  
                return false;  
            }  
        }

**把裁剪的图片转化为blob上传**

前台程序

//上传图片js变更为
    	  $("#getCroppedCanvas").on("click", function () {
      		var cas = $('#image').cropper('getCroppedCanvas');
    		if(cas == null){
    			alert("请选择图片");
    			return false;
    		}else{
    			var blob = processData(cas.toDataURL());
    			var formData = new FormData();
    			formData.append('croppedImage', blob);
    			formData.append('fileName', uploadedImageName);
    			$.ajax({    
    				url : 'wap_ajbj_upload_zm.htm',    
    		        type: "post",    
    		        data: formData,
    				processData: false,
    			    contentType: false,
    		        success: function (data) { 
    		        	if(data.result == 'success'){
    		        		alert("上传成功");
    		        	}  	
    		        } 
    			}); 
    		} 
    	 })
    
    //添加转化为二进制方法
    function processData(dataUrl) {
        var binaryString = window.atob(dataUrl.split(',')[1]);
        var arrayBuffer = new ArrayBuffer(binaryString.length);
        var intArray = new Uint8Array(arrayBuffer);
        for (var i = 0, j = binaryString.length; i < j; i++) {
            intArray[i] = binaryString.charCodeAt(i);
        }
        var data = [intArray],
            blob;
        try {
            blob = new Blob(data);
        } catch (e) {
            window.BlobBuilder = window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder;
            if (e.name === 'TypeError' && window.BlobBuilder) {
                var builder = new BlobBuilder();
                builder.append(arrayBuffer);
                blob = builder.getBlob(imgType); // imgType为上传文件类型，即 file.type
            } else {
                console.log('版本过低，不支持上传图片');
            }
        }
        return blob;
    }

后台程序

private String filePath = LxwmController.class.getResource("/").getPath().split("WEB-INF")[0]+ "upload/";
    	
    	@RequestMapping(value = "wap_ajbj_upload_zm.htm", method = {RequestMethod.GET, RequestMethod.POST })
    	@ResponseBody
    	public Map<String, Object> wap_ajbj_upload_zm(@RequestParam(value = "croppedImage",required = false)MultipartFile file, HttpServletRequest request) throws Exception {
    		Map<String, Object> result = new HashMap<String, Object>();
    		if(file != null && !file.isEmpty()){
    			String filename = request.getParameter("fileName");  //获取文件的名字
    			filename = new String(filename.getBytes("UTF-8"), "UTF-8");
    			String suffix = filename.substring(filename.lastIndexOf(".") + 1);
    			filename = System.currentTimeMillis() + "." + suffix;
    			try {
    				copyFileRename(file.getInputStream(), filename,filePath + "/ajbj/zm/");
    			} catch (IOException e) {
    				e.printStackTrace();
    			}	
    		}
    		result.put("result", "success");
    		return result;
    	}
    	
    	public static void copyFileRename(InputStream in, String fileName,String myFilePath) throws IOException {
    		FileOutputStream fs = new FileOutputStream(myFilePath + fileName);
    		byte[] buffer = new byte[1024 * 1024];
    		int byteread = 0;
    		while ((byteread = in.read(buffer)) != -1) {
    			fs.write(buffer, 0, byteread);
    			fs.flush();
    		}
    		fs.close();
    		in.close();
    	}

[https_download.csdn.net_download_rexueqingchun_10593965]: https://download.csdn.net/download/rexueqingchun/10593965