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 转码过来的。
这是我的第一篇博文，谢谢大家的支持，有什么问题也可以提出来，互相学习。