cropper 使用总结

最新推荐文章于 2024-05-07 00:04:32 发布

weixin_33985679

最新推荐文章于 2024-05-07 00:04:32 发布

阅读量149

点赞数

原文链接：https://my.oschina.net/u/2319418/blog/968550

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/2319418/blog/968550