說(shuō)明

這里主要用了webloader里面的圖片預(yù)覽功能uploader.makeThumb取出對(duì)應(yīng)base64圖片文件，將文件生成的文件傳給cropper裁剪，裁剪后將文件轉(zhuǎn)換成blob對(duì)象傳給服務(wù)器；

代碼分步驟實(shí)現(xiàn)

1、取出圖片base64的src

uploader.on('fileQueued', function(file) {
      //這里動(dòng)態(tài)添加一個(gè)上傳中的提示……
        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>不能預(yù)覽</span>');
            return;
          }
          clipFn(src);  //取出src傳給裁剪函數(shù)
          // var uploadClipImg = ……………………第三步
        }, 1, 1);

2、cropper裁剪

裁剪說(shuō)明：裁剪的步驟首先是根據(jù)cropper提供的接口獲取索要裁剪的尺寸參數(shù)，比如getData，然后傳給生成canvas圖像的方法getCroppedCanvas,然后
通過(guò)toDataURL()生成裁剪過(guò)后的base64地址；

        var clipFn = function(src) {
        //============這里是angular的彈窗，可換成其他形式
          var modal = $uibModal.open({      
            templateUrl: './frontend/template/clipModel.html',
            backdrop: 'static',
            windowClass: 'clipModel',
            controller: function($scope, $uibModalInstance, egArray) {
           ========彈窗結(jié)束
              $(function() {    //裁剪是一步操作，這里是必須的
                var clipImg = $('#clipImg');
                clipImg.attr('src', src);
                clipImg.cropper({
                  aspectRatio: 1  //這里是裁剪比例
                  autoCrop: true,  //是否自動(dòng)開啟裁剪
                  ready: function() {
                    $('#coverBtn').click(function() {   //上傳點(diǎn)擊按鈕
                      clipImg.parent().append($li);    //上傳中……的一個(gè)提示
                      var imgData = clipImg.cropper('getData', {}); //獲取當(dāng)前裁剪參數(shù)
                      if (imgData.x !== 0) {
                       var canVas = clipImg.cropper("getCroppedCanvas", imgData);  //生成裁剪過(guò)后的base64
                      var newImgUrl = canVas.toDataURL();
                        clipImg.attr('src', newImgUrl);    //裁剪過(guò)后的圖片預(yù)覽
                        var type = clipImg.attr('src').split(';')[0].split(':')[1];  //獲取圖片格式
                        upload(canVas,type)    //執(zhí)行上傳函數(shù)
                        }
                      return false;
                    })
                  }
                });
              })
            }
          });
        }

3、formData上傳服務(wù)器

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();  //關(guān)閉彈窗
                              }
                            },
                       error: function() {}
                          });
                         }
                        }, type);