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