ThinkPHP官网头像上传原理

目前，ThinkPHP官网的上传头像涉及到 图片上传 以及 图片裁剪。

1，图片上传

在html里使用的是 jquery.uploadify.js插件，可以实时显示上传的进度条，并且无刷新显示，用户体验很好（当然，你也可以什么插件都不用，那样就得进行页面跳转了）。

在php里使用官方的 uploadFile.class.php类库，不过改写了下。因为头像的命名最好用同一个名字和后缀，便于读取。

上传到服务器后，就将图片地址用ajax返回给页面，进行接下来的裁剪。

2，图片裁剪

在html里获取到了上传后的图片，显示在页面上。然后就用到JS裁剪插件 jquery.Jcrop.js。裁剪的具体方法可以查看源码。

裁剪的最终目的是获取裁剪区域相对于图片的四个角的坐标，然后再传给php端进行裁剪，插件所做的也就是获取坐标并实时显示效果。

为什么要裁剪两次呢？因为在js端裁剪是为了实时的显示图片效果，而在php端才是真正的保存裁剪后的图片。

页面里的效果：

真正保存后效果：

在php端获取到裁剪区域的坐标后，就可以对原图进行裁剪了。这里用到了 ThinkImage类库。
详细过程请看源码，无非就是通过GD库对图片进行的一系列处理而已（ 注意：GD库对gif图片的裁剪效果不好，大家可以用Imagick库）。

相信大家看了上面的介绍，对头像上传这一块流程和原理有了大概的了解。大家可以在例子的基础上进行扩展，如保存进数据库，以符合业务需要。

源码下载： http://www.thinkphp.cn/code/222.html

转载原文出处： http://www.thinkphp.cn/document/331.html