上一篇文章已經(jīng)編寫(xiě)了PC端的裁剪圖片案例，這次是涉及移動(dòng)端的頭像裁剪更換，類(lèi)似于微信更換頭像功能。。。

案例下載

思路跟PC端的案例是一樣的，這里就不多說(shuō)了。

將案例放到服務(wù)器上，如果出現(xiàn)上傳失敗可能是：
1.提交處理服務(wù)url出錯(cuò)：main.js

$(document.body).on('click', '[data-method]', function () {
      var data = $(this).data(),
          $target,
          result;

      if (data.method) {
        data = $.extend({}, data); // Clone a new one

        if (typeof data.target !== 'undefined') {
          $target = $(data.target);

          if (typeof data.option === 'undefined') {
            try {
              data.option = JSON.parse($target.val());
            } catch (e) {
              console.log(e.message);
            }
          }
        }

        result = $image.cropper(data.method, data.option);

        if (data.method === 'getCroppedCanvas') {
//          $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
//          alert(result.toDataURL('image/jpeg'));
//          $.post('/index.php/sdasdf',result.toDataURL('image/jpeg'),function(){},'json');
            var imgBase=result.toDataURL('image/jpeg');
            if(imgBase!=""){
                var data = {imgBase: imgBase};
                //提交地址
                $.post('../mobile/upload.php', data, function (ret) {
                    if(ret=='true'){
                        alert('上傳成功');
                      }else{
                        alert('上傳失敗');
                      }
                }, 'text');
            }
        }
        
        if ($.isPlainObject(result) && $target) {
          try {
            $target.val(JSON.stringify(result));
          } catch (e) {
            console.log(e.message);
          }
        }

      }
    }).on('keydown', function (e) {

      switch (e.which) {
        case 37:
          e.preventDefault();
          $image.cropper('move', -1, 0);
          break;

        case 38:
          e.preventDefault();
          $image.cropper('move', 0, -1);
          break;

        case 39:
          e.preventDefault();
          $image.cropper('move', 1, 0);
          break;

        case 40:
          e.preventDefault();
          $image.cropper('move', 0, 1);
          break;
      }

    });

實(shí)現(xiàn)效果：