cropper 使用总结

1. cropper 源码地址：传送门

2. 在代码中引入 cropper.js 与 cropper.css 文件后就能够进入开发了。

3. 有用的代码

// 经过input type=file 更新图片
function changeFile(node){
    var file = null;
    if(node.files && node.files[0] ){
        file = node.files[0];
    }else if(node.files && node.files.item(0)) {
        file = node.files.item(0);
    }
    var str = window.URL.createObjectURL(file);
    $cropper.cropper('replace', str);
}

4.咱们裁剪完照片后须要提交数据到服务器。刚开始使用form 表单提交，无法把裁剪后的数据添加到form。因此使用ajax提交数据。在这里使用formdata来分装数据。

$().cropper('getCroppedCanvas').toBlob(function (blob) {
  var formData = new FormData();

  formData.append('croppedImage', blob);

  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });
});

5.服务器端使用 MultipartFile file 来接受文件便可。

SpringMVC 文件上传 MultipartFile Demo