小议头像预览裁剪上传的实现

在做头像上传的时候，浏览器默认是无法取得本地图片的，当然 HTML5 是可以的。不过IE6-8怎么破？目前比较通用的方案都是 Flash 解决。

说道头像预览和裁剪，我最熟悉的就是 Discuz 的那个了，非常方便好用。不仅可以选择本地图片，还能直接调用摄像头拍摄，当然前提是你必须有个摄像头。

于是我心血来潮的想把他剥离出来给项目用，于是有就了此文。。我就不说怎么提取怎么调用，就简单的谈谈他是怎么处理图片好了，反正不是我们想的那样，和我想的出入非常大。

这个插件呢，差不多分为四步处理：1. 前台用js生成IE或现代浏览器用的flash嵌入标签2. 通过 flash 选择图片上传给服务器 (没错, 这货是直接上传原图的)3. 读取刚刚上传到服务器的图片，进行裁剪处理。4. 把裁剪好的图片分别缩放为 200x200, 120x120, 48x48 的图，当然不文件，而是编码数据提交给后台， 没仔细看是什么编码，反正后台解码后fopen写入文件的。

当然果然是摄像头拍摄的话，2, 3步变为拍摄，1, 4一样的。好了，看过步骤，相信大家和我一样灰常桑心，，说好的预览，肿么变成上传后预览了，那要你何用？难道仅仅为了裁剪而调用这么变态的插件么？这不是我的作风。(当然目前用他，因为项目时间有限，之后再重写)

下面我们来谈下 js 实现思路吧。既然没办法预览(HTML5除外)，那么我们就先上传，然后"裁剪"即可。FormData或iframe做伪Ajax上传，得到文件路径后，就可以预览，然后"裁剪"即可。当然不是真正的裁剪，也是伪裁剪，只是记录坐标后提交给后台，让后台为我们真正的裁剪。因为图片第一步上传了，第二步我们只要ajax提交裁剪区域坐标即可，不需要重新上传图片。相信聪明的你一定想到怎么实现了。

当然你也可以参考 碳酸次钴 写的《在线图片裁剪（兼容IE8）》。其实如果不是滤镜的兼容性和安全问题就可全兼容，当然我的思路就是直接上传后裁剪，所以是真正的全兼容。