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