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

我在开发项目的时候,前端给的上传头像插件是 cropbox.js ,当时觉得很好用,可是当要保存图片的时候问题来了,不知道怎么保存,百度了一大堆,发现很多人跟我一样也没有找到方法,不过思路都是一样的,把base64图片的路径转码再保存就可以了。我用的是ThinkPHP框架,下面直接亮代码,以我自己的实例来介绍:


HTML代码:

这是大概效果:

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

JQuery代码:

$(window).load(function() {
    var faceurl = '';
    var options = {
      thumbBox: '.thumbBox',
      spinner: '.spinner', 
      imgSrc: faceurl ? faceurl: '/Public/Uploadimg/headimg/food-apple.jpg', 	//默认图片的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('

64px*64px

'); $('.cropped').append('

128px*128px

'); $('.cropped').append('

180px*180px

'); $('.cropped').append(''); }) $('#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 转码过来的。
这是我的第一篇博文,谢谢大家的支持,有什么问题也可以提出来,互相学习。


你可能感兴趣的:(PHP)