cropper.js 图片剪裁功能使用

英文文档（较全，比较新）https://github.com/fengyuanchen/cropperjs/blob/master/README.md

源码下载：https://github.com/fengyuanchen/cropperjs小 demo：

1.引入cropper的css，js文件

2.显示（填充）图片资源，便于被js获取

 

...

确定

3.js监听裁剪图片

window.addEventListener('DOMContentLoaded', function () {

      var image = document.querySelector('#image');

      var previews = document.querySelectorAll('.preview');

      var $alert = $('.alert');

      cropper = new Cropper(image, {

      scalable:false,    //参数  由需求自定义

      zoomable:false,

      background:false,

      viewMode:1,

      aspectRatio:ratio,  //裁剪框比例设置动态改变的，由外界参数决定（单独使用可设置常量）

        checkCrossOrigin:false,

        checkImageOrigin:false,

        dragCrop:false,

        modal:false,

        dragMode:'move',

        movable:false

        });

    document.getElementById('crop').addEventListener('click', function () {

        var initialAvatarURL;

        var canvas;

        if (cropper) {

          canvas = cropper.getCroppedCanvas({});

          initialAvatarURL = image.src;

          pic_data = canvas.toDataURL();

          // canvas.toBlob(function (blob) {  报错

          //  var formData = new FormData();

          //  formData.append('file', blob, 'cropper.jpg');

          //  formData.append('category','bbs_post_recom/cropper');

          // });

          //调用自定义方法处理  canvas.toBlob() 失败事件

          blob = processData(pic_data);//自定义方法解决canvas.toBlob() 失败

          var formData = new FormData();

          formData.append('file', blob, 'cropper.jpg');

          formData.append('category','bbs_post_recom/cropper');

          $.ajax('pic_upload', {

            method: 'POST',

            data: formData,

            processData: false,

            contentType: false,

            success: function (data) {

              da = JSON.parse(data);

            if(da.ret == 1){    //保存成功后的操作

                .....

            }else{

              alert(da.msg);

            }

            },

            error: function (data) { 

              image.src = initialAvatarURL;

            },

            complete: function () {

            },

          });

        }

      });

    });

方法来自：https://blog.csdn.net/github_38854224/article/details/86741601