最近研究一个功能:用as3写的上传图片并实现预览。觉得花了很多时间也学到很多知识,将自己的所得记录下来供大家分享。
首先是预览功能的实现,大家自然而然就想到了loader来加载图片并显示,由于项目没有对图片大小进行限制,所以加载的时候会非常慢。场景:如果同时加载100张5M以上的图片,内存可能会升到1000M以上,导致机器卡死。
解决方案:
1.不要同时加载100张图片,一张加载完再加载下一张。 这个是参照网易相册的上传功能,qq空间的上传功能来源于插件,qq相册也是flash写的,仍存在很卡的问题
2.如果需要多个loader来加载,图片就需要用bitmap显示出来,并将loader释放掉内存,方式是:
(loader.contentLoaderInfo.content as Bitmap).bitmapData.dispose();//从内存中删除原图的bitmapData引用
loader.unload(); loader = null;//将loader置为空
当然,用一个loader更好,直接通过loader控制大小显示成缩略图,也不用释放掉
3.用filereference打开本地图片,记得在加载完图片释放掉filereference数据,方式是:
filereference.data.clear();//不清除,内存会一直很高
4.当加载的图片很多,会想到用scrollpane,但是一方面滚动条不美观,另一方面会碰到一些浏览器兼容问题,像有的浏览器的滚动事件会失效,我的处理方式是自己重写滚动条,通过遮罩控制显示区域,并用js监听滚轮事件,可以参照 http://www.cnblogs.com/meteoric_cry/archive/2013/01/06/2848221.html
然后是上传功能的问题,首先了解上传的3中方式,参照http://blog.csdn.net/txiejun/article/details/6934107因为是压缩上传,我们想到了用urlLoader进行二进制上传,关键问题是urlLoader无法监听上传进度事件,解决方案来源于http://stackoverflow.com/questions/9559948/post-file-upload-using-urlrequest,利用filereference来上传二进制,根据文章和实践发现,上传时仍然会报错,于是我们把上传的二进制转化成字符串就没问题了,压缩是通过jpgEncoder进行的,因为效率比较低,显示压缩进度会给用户更好的体验。
(上传功能这一块,出现误区,就是用filereference上传二进制的方式,虽然实现了二进制的上传,实际却把原图一起上传了,这样很占带宽,仍在找方案)
经验总结:关注内存,关注用户体验