我在開發專案的時候，前端給的上傳頭像外掛是 cropbox.js ，當時覺得很好用，可是當要儲存圖片的時候問題來了，不知道怎麼儲存，百度了一大堆，發現很多人跟我一樣也沒有找到方法，不過思路都是一樣的，把base64圖片的路徑轉碼再儲存就可以了。我用的是ThinkPHP框架，下面直接亮程式碼，以我自己的例項來介紹：

HTML程式碼：

<form id="form" action="{:U('Admin/User/edit')}" method="post" enctype="multipart/form-data" />
<div>
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action"> 
<div class="upload">
<a href="javascript:void(0)" class="upload-img">
<label for="upload-file">上傳影象</label>
</a>
<input type="file" class="" name="upload-file" id="upload-file" />
</div>
<input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
</div>
<div class="cropped"></div>
</div>
<button type="submit" class="btn" id="btnUp">確認修改</button>
</form>
 

這是大概效果：

JQuery程式碼：

$(window).load(function() {
    var faceurl = '<?php echo $face;?>';
    var options = {
      thumbBox: '.thumbBox',
      spinner: '.spinner', 
      imgSrc: faceurl ? faceurl: '/Public/Uploadimg/headimg/food-apple.jpg', <span style="white-space:pre">	</span>//預設圖片的URL
    }
    var cropper = $('.imageBox').cropbox(options); 
    $('#upload-file').on('change', function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $('.imageBox').cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $('#btnCrop').on('click', function(){
      var img = cropper.getDataURL();
      $('.cropped').html('');
      $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>'); 
      $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>'); 
      $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>'); 
      $('.cropped').append('<input type="hidden" value="'+img+'" name="headpic">');
    })
    $('#btnZoomIn').on('click', function(){
      cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
      cropper.zoomOut();
    })
  });
 

  public function edit(){
    $id['id']=I('post.id');
    $data=array(
      'face' =>I('post.headpic'), 
    );
    //處理使用者裁剪的圖片
    if($data['face']){
      $face = $this->SaveFormUpload($id['id'], $data['face']);
      if($face['error']){
        $this->error($face['msg']);
      }
      $data['face']= $face['url'];
    }else{
      unset($data['face']);
    }
    $row=M('member')->where($id)->save($data);
    if($row!=null){
      $this->success('修改成功！',U('User/list'));
    }else{
      $this->error('修改失敗！');
    }
  }

  /**
  * 儲存提交過來的圖片
  *@param $savepath  string  儲存圖片的路徑 不是全路徑
  *@param $img       stiring base64圖片實體，含base64圖片頭
  *@return           array
  *@author jorsh20151106
  **/
  function SaveFormUpload($savepath, $img, $types=array()){
    $basedir = '/Uploadimg/headimg/'.$savepath; 
    $fullpath = dirname(THINK_PATH).$basedir;
    if(!is_dir($fullpath)){
      mkdir($fullpath,0777,true);
    }
    $types = empty($types)? array('jpg', 'gif', 'png', 'jpeg'):$types;
    $img = str_replace(array('_','-'), array('/','+'), $img);
    $b64img = substr($img, 0,100);
    if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $b64img, $matches)){
      $type = $matches[2];
      if(!in_array($type, $types)){
        return array('error'=>1,'msg'=>'圖片格式不正確','url'=>'');
      }
      $img = str_replace($matches[1], '', $img);
      $img = base64_decode($img);
      $photo = '/'.md5(date('YmdHis').rand(1000, 9999)).'.'.$type;
      file_put_contents($fullpath.$photo, $img);
      return array('error'=>0,'msg'=>'儲存圖片成功','url'=>$basedir.$photo);
    }
    return array('error'=>2,'msg'=>'請選擇要上傳的圖片','url'=>'');
  }