webuploader + cropper实现图片裁剪后上传

说明

这里主要用了webloader里面的图片预览功能uploader.makeThumb取出对应base64图片文件，将文件生成的文件传给cropper裁剪，裁剪后将文件转换成blob对象传给服务器；

代码分步骤实现

1、取出图片base64的src

uploader.on('fileQueued', function(file) {
      //这里动态添加一个上传中的提示……
        var $li = $(
          '<div id="' + file.id + '" class="cover-tier pa df center-box w100_ h100_ zimport" style="text-align: center;position:absolute;top:0;width:100%;">' +
          '<span>上传中...</span></div>'
        );
        uploader.makeThumb(file, function(error, src) {
          if (error) {
            $img.replaceWith('<span>不能预览</span>');
            return;
          }
          clipFn(src);  //取出src传给裁剪函数
          // var uploadClipImg = ……………………第三步
        }, 1, 1);

2、cropper裁剪

裁剪说明：裁剪的步骤首先是根据cropper提供的接口获取索要裁剪的尺寸参数，比如getData，然后传给生成canvas图像的方法getCroppedCanvas,然后
通过toDataURL()生成裁剪过后的base64地址；

        var clipFn = function(src) {
        //============这里是angular的弹窗，可换成其他形式
          var modal = $uibModal.open({      
            templateUrl: './frontend/template/clipModel.html',
            backdrop: 'static',
            windowClass: 'clipModel',
            controller: function($scope, $uibModalInstance, egArray) {
           ========弹窗结束
              $(function() {    //裁剪是一步操作，这里是必须的
                var clipImg = $('#clipImg');
                clipImg.attr('src', src);
                clipImg.cropper({
                  aspectRatio: 1  //这里是裁剪比例
                  autoCrop: true,  //是否自动开启裁剪
                  ready: function() {
                    $('#coverBtn').click(function() {   //上传点击按钮
                      clipImg.parent().append($li);    //上传中……的一个提示
                      var imgData = clipImg.cropper('getData', {}); //获取当前裁剪参数
                      if (imgData.x !== 0) {
                       var canVas = clipImg.cropper("getCroppedCanvas", imgData);  //生成裁剪过后的base64
                      var newImgUrl = canVas.toDataURL();
                        clipImg.attr('src', newImgUrl);    //裁剪过后的图片预览
                        var type = clipImg.attr('src').split(';')[0].split(':')[1];  //获取图片格式
                        upload(canVas,type)    //执行上传函数
                        }
                      return false;
                    })
                  }
                });
              })
            }
          });
        }

3、formData上传服务器

var uploadClipImg = function(canVas,type){
   canVas.toBlob(function(blob) {
    canVas.toBlob(function(blob) {
          var formData = new FormData(
           formData.append("file", blob, file.name);
               $.ajax({
                   type: "POST",
                   url: upUrl,
                   data: formData,
                   contentType: false, //必须
                  processData: false, //必须
                       dataType: "json",
                        success: function(retJson) {
                              if (retJson.code == 200) {
                                console.log('上传成功:', retJson);
                                clipImg.cropper('destroy');  //格式化裁剪
                                $('#' + file.id).remove();  //移除上传中……提示
                                $uibModalInstance.close();  //关闭弹窗
                              }
                            },
                       error: function() {}
                          });
                         }
                        }, type);