一道腾讯校招试题

 

转载 darkangle.cnblogs.com

 

网站里面经常会用到头像，不少网站上都使用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

我在源码中已经添加了详细的注释请注意阅读。
源代码打包下载