圆角头像剪裁php,PHP与JS实现头像剪裁功能架构总结

准备开发个头像上传及剪裁功能 想象的比较简单 没想到做起来这么费时间 – – 逻辑也要比我想象的多 下面简单说一下前后端的实现！

前端：主要是用JS 这里如果想偷懒的话推荐两个JQ jcrop和jscroll都很不错

前端主要是对图片进行定位 剪裁 长宽 和 横纵坐标的计算(这里有个问题 假如图片尺寸过大 要给一个max-width:600px;的属性)

后端：1、先接收剪裁图片的原图

2、将原图进行第一次处理 AJAX返回给前端 JS：前端加载 后端的图片 并且将图片动态给予剪裁指令相关function

3、将剪裁的参数 x y w h 及原图文件名 四个参数值传入到后端

4、后端处理

(1)在服务器内的原图  (2)前端的五个数据

根据数据读取服务器内原图 然后通过参数对图片进行剪裁 生成第二张图片

这里有个小细节需要注意：之前前端max-width:600px; 那我们后端在处理的时候 也要对大于600像素宽度的图进行等比剪裁处理

也就是 1、先将服务器内width>600px的图片 等比例 生成图片2

2、将图片2 他就是宽度600px

暂时就用PHP的封装方法了撒 使用的是GD库

//有头像 并且 把昵称字段追加进来

$picname=$_POST['avatarf']; //将POST的名字传进来

$image = new \Think\Image();

$imagesinfo=$image->open('images/user/avatar/temp/'.$picname);

$imgwidth=$imagesinfo->width();

$imgheight=$imagesinfo->height();

$p1=stripos($picname,'.'); //返回点的位置 分析图片名称

$picstart=substr($picname,0,$p1); //计算图片名

$picend=substr($picname,$p1); //计算图片后缀

if($imgwidth > 600){ //图像最大限度600px 大于600生成600px

$w1= 600; //前台max-width:600px

$h1= floor($imgheight*(600/$imgwidth)); //计算宽度600的等比例高度

$imgmax=$image->thumb($w1,$h1)->save('images/user/avatar/temp/'.$picstart.'_max600'.$picend);

$image->open('images/user/avatar/temp/'.$picstart.'_max600'.$picend);

}

//将图片裁剪为400x400并保存为corp.jpg

$avatarname=$uinfo['id'].mt_rand(1000,9999);

$image->crop($_POST['w'],$_POST['h'],$_POST['x'],$_POST['y'])->thumb(150,150)->save('images/user/avatar/'.$avatarname.$picend);

$config=array(

'name' => $name,

'avatar' => '/images/user/avatar/'.$avatarname.$picend

);

$res=$Musers->Mupdate($uinfo['id'],$config);

if($res){

$this->uinfoload(); //更新uinfo session

echo '{"state":1,"con":"头像修改成功"}';

}else{

echo '{"state":2,"con":"修改失败，错误3901"}';

}

将剪裁处理后的图片名存入到数据库