PHP处理Form表单提交的裁剪后的base64的图片并保存 以cropbox.js控件为例

我在开发项目的时候，前端给的上传头像插件是 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();
    })
  });

PHP后台代码：

  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'=>'');
  }

整个过程大概就是这样，如果想知道获取过来的值是什么样的，可以自己输出 I('post.headpic') 的值来看，可以发现图片路径是 base64 转码过来的。
这是我的第一篇博文，谢谢大家的支持，有什么问题也可以提出来，互相学习。