java cropper_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 来接受文件即可。