初步想的步驟是這樣的：

一、點選頭像區域選擇本地圖片

二、顯示被選本地圖片顯示裁剪選取框

三、確認選取後，上傳到阿里雲返回路徑

四、初始點選區域顯示裁剪完成的圖片

程式碼片段

 <div align="center" class="face">
    <img src="images/pic06.jpg">/*預設頭像*/<pre name="code" class="html">    <form name="form0" id="form0" >/*選取本地圖片的input 相對於face盒子定位、寬高100% 透明度0*/

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre">			</span><input type="file" name="file0" id="file0" multiple="multiple" /><br></span>
 

以上截圖右側內容僅供參考，具體程式碼就是下面這一點，其他的盒子都是外掛自己生成的，排版無需新增<img alt="大笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif" />

<div class="img-container">  
      <img id="img0"  src="">  
      <div class="close qxooo" >取消</div>
      <div class="saveBtn">選取</div>
</div>
 

<img class="newImg" src="">

<script src="common/js/jquery.js"></script>/*jquery的包*/

<script src="js/imagecropper.js"></script>/*圖片裁剪的外掛*/

<script type="text/javascript">
  
$("#file0").change(function(){
  var objUrl = getObjectURL(this.files[0]) ;
  console.log("objUrl = "+objUrl) ;
  if (objUrl) {
    $("#img0").attr("src", objUrl) ;
    $('.cropper-canvas img').attr('src',objUrl);
    $('.cropper-view-box img').attr('src',objUrl);
  }
  var File=$('#img0').attr('src');
  if(File!=''||File==undefined){
    $('.img-container').show();
  }
}) ;


//建立一個可存取到該file的url
function getObjectURL(file) {
  var url = null ; 
  if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
  } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
  } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
  }
  return url ;
}


$('.close').click(function(){
  $('.img-container').hide();
})


function convertToData(url, canvasdata, cropdata, callback) {
  var cropw = cropdata.width; // 剪下的寬
  var croph = cropdata.height; // 剪下的寬
  var imgw = canvasdata.width; // 圖片縮放或則放大後的高
  var imgh = canvasdata.height; // 圖片縮放或則放大後的高


  var poleft = canvasdata.left - cropdata.left; // canvas定點陣圖片的左邊位置
  var potop = canvasdata.top - cropdata.top; // canvas定點陣圖片的上邊位置


  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext('2d');


  canvas.width = cropw;
  canvas.height = croph;


  var img = new Image();
  img.src = url;


  img.onload = function() {
    this.width = imgw;
    this.height = imgh;
    // 這裡主要是懂得canvas與圖片的裁剪之間的關係位置
    ctx.drawImage(this, poleft, potop, this.width, this.height);
    var base64 = canvas.toDataURL('image/jpg', 1);  // 這裡的“1”是指的是處理圖片的清晰度（0-1）之間，當然越小圖片越模糊，處理後的圖片大小也就越小
    callback && callback(base64)      // 回撥base64字串
  }
}


$(function(){


  var $image = $('.img-container > img');


  $image.on("load", function() {        // 等待圖片載入成功後，才進行圖片的裁剪功能
      $image.cropper({  
          aspectRatio: 1 / 1  　　// 1：1的比例進行裁剪，可以是任意比例，自己調整  
      });
  })


  // 點選儲存
  $(".saveBtn").on("click", function() {
      var src = $image.eq(0).attr("src");  
      var canvasdata = $image.cropper("getCanvasData");  
      var cropBoxData = $image.cropper('getCropBoxData');  
      convertToData(src, canvasdata, cropBoxData, function(basechar) {
          // 回撥後的函式處理  
          $(".newImg").attr("src", basechar);
      // 上傳圖片獲取連結
      ajaxpubilc("/file/downloadBase64Img",{base64Img:basechar},$ajaxPOST, function (data) {  /*介面作用是利用base64解碼並建立臨時圖片檔案在下載在本地*/
        if (data.success) {
          var url = data.data;
          // 儲存頭像地址
          ajaxpubilc("/member/info/saveMemberImageUrl",{imgUrl:url},$ajaxPOST, function (res) {/*通過臨時檔案上傳檔案到阿里雲獲取圖片連結*/
            if(res.success == true && res.code == 0) {
              window.location.href='changeInformation3.html';
            }else{
              alert("伺服器繁忙");
            }
          });
        } else {
          alert("伺服器繁忙");
        }
      });
      });
  })
})
</script>

備註：ajaxpubilc方法原始碼封上

function ajaxpubilc(url,data,posttype,callback){
var loginrel= $ajaxurl+'/'+'login.html';


if(data==undefined){
data = {};
}
data["access_token"]=tooken;
$.ajax({
url:$ajaxurl+url,
type:posttype, /*$ajaxPOST*/
dataType:'json',
data:data,
success: function(msg){
callback(msg);
},
error:function(msg){


var data = jQuery.parseJSON(msg.responseText);




if(data.error==undefined){
alert(msg);
}else{
                if(msg.status==401){
$.removeCookie("access_token");
                    window.location='loginnew.html'
                }
}
}
})
}

   /*攻城獅部落格不定期更新，有錯誤會及時更正如有不同見解，請在下方評論。。。，如果採納，請點贊哦*/