欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

cropper裁剪图片并上传

程序员文章站 2022-04-09 08:04:36
...

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

   我的资源地址: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="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 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="{ &quot;width&quot;: 200, &quot;height&quot;: 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">&times;</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();
	}

 

相关标签: cropper裁剪图片