网站里面经常会用到头像,不少网站上都使用Flsh来生成,今天正好看到一个Flash做得还不错,于是开始研究它的实现原理,下面是分析过程,不感兴趣的请直接跳过,到最后去下载源码包(在沙加的神舟本上测试通过),测试时请将 avatar_test 上传至网站根目录, 使用如果不正常的话多半是目录没有写权限, 请开启 avatar开头的三个子目录写权限. 特别申明, AvatarEditor.swf 由 bai.sohu.com 开发,版权归搜狐公司所有. 转载本文请注明出自 darkangle.cnblogs.com 谢谢
要分析它如何使用先从调用代码开始, 用firebug分别找到上传图片和摄像头的调用代码,大概是象这样的一段:
<embed height="464" width="514" flashvars="type=photo&photoUrl=http://pic7.bai.sohu.com.cn/a/2009/05/26/09/43/1217a5c86c_0.jpg&photoId=167&postUrl=http://upload.bai.sohu.com/camera.do?snstoken=007eae692e8c665ea195d6702cf59d55*13L6RgykIeLsXCkoxJG_0D45NrXNbrepW0Lpy2-wDqfKYhnrFqBlt_pg3gi575FB&saveUrl=http://upload.bai.sohu.com/icon.do?snstoken=007eae692e8c665ea195d6702cf59d55*13L6RgykIeLsXCkoxJG_0D45NrXNbrepW0Lpy2-wDqfKYhnrFqBlt_pg3gi575FB" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" src="http://s1.bai.itc.cn/r/f_v1243271361/album/avatar/AvatarEditor.swf"/>
给这个flash传进去几个参数,具体是什么意思暂不清楚, 往下慢慢分析.
从IE缓存文件中找到AvatarEditor.swf, 使用Sothink SWF Decompiler (特别版网上可以找到,我用的5.0版) 反编之, 虽然以前没做过flash, 不过看了一下里面的脚本,也不是太难,找到两个关键脚本: AvatarEditor.as 和 BinaryTransfer.as , 其中BinaryTransfer负责以二进制向指定的地址传送数据.
上面的几个参数:photoUrl是原始图片的URL,不论是用摄像头拍摄还是上传方式,服务器端需要返回一个原始图片的地址供AvatarEditor编辑使用, type=photo是上传方式或者是使用头像相册中的图片. type=camera时是使用摄像头, camera.do 是保存摄像头拍摄照片的脚本地址,注意后面需要加参数(因为拼接地址需要),这个示例中不需要,所以用一个无意义的radom参数代替, 否则最后请求的地址不正确.
icon.do是保存缩略图的地址. photoId 是原始图片的id.
为了更清楚地了解post数据过程可以装一个fiddler, 监视post的地址以及返回值.
图片被保存后返回的是一些json数据,AvatarEditor根据这些数据决定上传成功还是失败,并通过外部js接口调用通知浏览器.
通过fiddler查看结合 BinaryTransfer 代码的分析得知 AvatarEditor 会把生成的jpg以二进制方式Post到服务器端,这样的话接收方式就有一些区别,而不是传统的表单上传文件的接收方式,调查一番后发现可以通过file_get_contents("php://input")来获取上传的二进制数据,再使用 file_put_contents(SD_ROOT.'./'.$new_avatar_path,file_get_contents("php://input")); 就可以写入目录文件内容,到此保存文件的问题就解决了,再用json返回一些必要数据给AvatarEditor
我在源码中已经添加了详细的注释请注意阅读。
源代码打包下载
效果图:
我解压出来的文件, 仅供学习,擅自使用后果自负