浏览器上传图片技术的一点分析

浏览器上传图片技术的一点分析

 

一、常见传图方法分析

对比项 方法	开发成本	兼容性	程序效率	处理图像能力	其他高级图像处理能力	是否需要后端特殊处理
Flash方法	低	一般	较高	高	高	一般不需
HTML5 方法	一般	一般	一般	一般	一般	不需
普通iframe form方法	低	好	/	/	/	需要
其他插件方法(如ActiveX)	高	一般	高	高	高	不需

注：

•  开发成本：指开发时间、实现难度、开源库丰富程度等综合判断
•  兼容性：指浏览器兼容性、浏览器是否原生支持等
•  程序效率：指像素级的图片处理效率
•  处理图像能力：指像素级旋转、缩放等基本操作
•  其他高级图像处理能力：如色彩&模糊滤镜、特殊形状变换、裁剪等高级操作
•  是否需要后端特殊处理：即请求头、后端返回的地址数据等是否需要特殊处理

二、Flash传图效率、耗时测试

1、测试环境说明

CPU: E5800 3.2GHz,  RAM: 4G

OS: Windows 7, 32bit

Browser: Chrome 22.0.1229.96, Flash player: 11.5.502.110

2、传图各步骤大概耗时（毫秒）

测试图片：格式JPG，大小10M，宽高5501×4126 (4:3)

操作 尺寸	本地选择耗时	对原始数据缩小耗时	图片数据旋转耗时	JPG编码耗时	JPG数据体积(KB)	RAM占用(MB)
原始尺寸	418	/	300	4771	2130	60
530×397	/	700	3	79	67	/
1000×750	/	710	10	250	192	/
2000×1500	/	740	35	650	479	/

分析：

• 对一张10M的图片进行缩小处理耗时700-740ms，耗时相差不大
• 对缩小后的图片进行旋转，耗时很小几乎可以忽略
• JPG编码耗时和生成的图片宽高大小相关，相差明显；如果用C++的AS3 JPG编码器，编码时间还会减少15%-40%，图片数据体积也会减少，而代价是swf会增大160K
• 供用户旋转的缩略图经过优化后的耗时很小，可以忽略不计
• 另外，flash编码较大宽高的图片时可能会产生浏览器假死的情况，如果你的项目这种情况比较常见可以用异步编码的方式编码，但编码时间会比同步的稍慢，flash常见的JPG编码器都提供这一功能

举例：

flash对10M的图片生成530×397图片数据耗时：700 + 3 + 79= 782ms。即用户上传一张10M的、缩小到530×397并旋转后的图片约耗时782ms + 网络传送耗时。总体来说，现在的flash前端技术下处理较大图片的耗时、效率在可接受范围内，关键要看最后生成的图片大小，这个大小对生成图片的耗时有一定影响。

三、上传图片思路

1、网上常见方案

•  前端处理（如压缩、添加滤镜等）：网易相册、网易微博、腾讯微博、新浪微博、QQ空间、人人网……
•  前端处理（如压缩）、后端提供旋转接口：QQ空间……
•  前端不处理、后端提供旋转接口：lofter、搜狐微博……
•  前后端均不处理（通过另外的图片服务处理图片）：网易微博、花田

另外淘宝网的处理方式是提供原图和压缩图上传两种方式供用户选择，属于前端压缩

2、参考方案

(1)前端处理图片

   即前端flash对图片进行预览、旋转和exif自动旋转、缩放等操作，最后生成的图片是被压缩过的图片。

优点：交互容易实现、发送的数据量小、firefox的cookie问题得到解决、服务器压力得到分散……

缺点：旋转预览等操作在flash里面因此后期样式上的扩展不容易、无精确上传进度、content-type可能需要改变而引起的后端需要做特殊处理……

(2)前端不处理图片，后端压缩，并提供旋转接口

   即前端按照现在的方式不变，后端自动旋转后返回地址，前端展示，再旋转时用后端提供的接口。

   优点：后期样式扩展性容易、精确上传进度、旋转接口可复用在其他功能或其他项目里……

缺点：服务器压力大、发送数据量大、firefox下cookie有问题……

四、总结

　　如果图片上传功能是网站常用的功能，建议图片在上传前进行压缩。由于flash对二进制数据的处理有很好的支持，因此可以灵活构造http请求，数据形式可以是二进制数据、表单数据甚至文本图片数据，综上所述flash技术是图片上传的最优方案。最后想说上传方案可以灵活处理，综合前后端意见得出合适方案。

 

==================================================

作者：绿色花园

出处： http://www.cnblogs.com/cos2004/archive/2012/11/29/2795176.html

==================================================