PHP与JS实现头像剪裁功能架构总结

发表于： 2016年8月4日 2018年7月26日
分类：未分类

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

前端：主要是用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"}';
}

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

admin

1009