在项目中写到会员模块的时候肯定会用到会员头像剪裁的，而在线剪裁就是必须的了。在线剪裁的是base64的值，怎么处理成图片呢？
需求分析：在会员模块的时候，我们不会也不可能把用的头像存在服务器然后再给他剪裁，所以我们需要在线剪裁，然后直接保存那个剪裁之后的图片的。
问题：图片剪裁之后是base64位的进制码，我们不可能也不方便存储在数据库里。
解答：网上找了一些在线剪裁的比如：http://jquery-plugins.net/image-cropper-jquery-image-cropping-plugin
这样的工具很多的，这里的话我用的是一个比较简洁的：cropbox
首先需要使用这个插件的话，依赖一个JQ，然后就可以了。样式的话需要自己去调整的。
一般这样的插件处理之后的图片的话是base64进制的文件，直接存入数据库的话问题比较多，于是我在网上找了下，原来PHP的自带函数里面就有这个函数
base64_decode
我们需要转义之后的进制码写入一个png或者jpg这样的文件就行，而且写入文件PHP也给我们提供了函数
file_put_contents
下面的写上自己的代码，不足之处，请留言告诉我，谢谢。
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会员头像剪裁</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
.action{width: 400px;height: 30px; margin: 10px 0;}
.cropped > img{ margin-right: 10px; }
.imageBox{ position: relative;height: 400px; width: 400px; border:1px solid #aaa;background: #fff; overflow: hidden; background-repeat: no-repeat; cursor:move;}
.imageBox .thumbBox{ position: absolute;top: 50%; left: 50%;width: 200px; height: 200px;margin-top: -100px; margin-left: -100px; box-sizing: border-box;border: 1px solid rgb(102, 102, 102);box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);background: none repeat scroll 0% 0% transparent;}
.imageBox .spinner{position: absolute;top: 0; left: 0; bottom: 0; right: 0; text-align: center; line-height: 400px; background: rgba(0,0,0,0.7);}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<h2 class="title">会员头像变更</h2>
<a href="{:U('User/Index/index')}">返回首页</a>
<div class="cropped"></div>
<input type="file" id="file" style="width: 250px"/>
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action">
<span id="msg"></span>
<input type="button" id="btnCrop" value="完成"/>
</div>
</div>
</div>
<script src="__PUBLIC__/Js/jquery-1.11.0.js"></script>
<script src="__PUBLIC__/Js/cropbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var options = {
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: '/Public/Images/avatar.png'
}
var cropper = $('.imageBox').cropbox(options);
$('#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();
//console.log(img);
$('.cropped').append('<img src="' + img + '"/>');
$.ajax({
type:"post",
url:"/User/Photo/img",
async:true,
data:{"head": img},
success:function(data){
location.href="/User/Index/index";
}
});
})
});
</script>
</body>
</html>我是本地虚拟主机测试的，如果是2级目录的话，还是建议开启虚拟主机开发的，开启虚拟主机的话，我博客也有文章的。
上面的代码我是把JS文件放在Public/Js下这个，根据自己调整，最后我会打包给出下载地址的。
ajax的提交地址的话，根据自己的需求变动，我提交到 User/Photo/img 这个方法
//头像处理
public function img(){
$id = session('uid');
$head = I('post.head');
$time = time();
$s = base64_decode(str_replace('data:image/png;base64,', '', $head));
file_put_contents('head/'.$time."_".$id.'.png',$s);
//var_dump($head);die;
if(M('userinfo')->where("useid = $id")->save(array("head"=>"/head/".$time."_".$id.".png"))){
$this->ajaxReturn(array('error'=>0));
}else{
$this->ajaxReturn(array('error'=>1));
}
}为了保证上传的时候，名字可以同步存入数据库，我用中间时间戳加上用户名的唯一标示来区分。
上一篇： PHP一道笔试题...
下一篇： 邮件绑定会员信息...
