在做头像上传的时候,浏览器默认是无法取得本地图片的,当然 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)》。
其实如果不是滤镜的兼容性和安全问题就可全兼容,
当然我的思路就是直接上传后裁剪,所以是真正的全兼容。