轉帖瀏覽器上傳圖片技術的一點分析

 瀏覽器上傳圖片技術的一點分析

 

1、常見傳圖方法分析

對比項 方法	開發成本	兼容性	程序效率	處理圖像能力	其餘高級圖像處理能力	是否須要後端特殊處理
Flash方法	低	通常	較高	高	高	通常不需
HTML5 方法	通常	通常	通常	通常	通常	不需
普通iframe form方法	低	好	/	/	/	須要
其餘插件方法(如ActiveX)	高	通常	高	高	高	不需

注：

•  開發成本：指開發時間、實現難度、開源庫豐富程度等綜合判斷
•  兼容性：指瀏覽器兼容性、瀏覽器是否原生支持等
•  程序效率：指像素級的圖片處理效率
•  處理圖像能力：指像素級旋轉、縮放等基本操做
•  其餘高級圖像處理能力：如色彩&模糊濾鏡、特殊形狀變換、裁剪等高級操做
•  是否須要後端特殊處理：即請求頭、後端返回的地址數據等是否須要特殊處理

2、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前端技術下處理較大圖片的耗時、效率在可接受範圍內，關鍵要看最後生成的圖片大小，這個大小對生成圖片的耗時有必定影響。

3、上傳圖片思路

1、網上常見方案

•  前端處理（如壓縮、添加濾鏡等）：網易相冊、網易微博、騰訊微博、新浪微博、QQ空間、人人網……
•  前端處理（如壓縮）、後端提供旋轉接口：QQ空間……
•  前端不處理、後端提供旋轉接口：lofter、搜狐微博……
•  先後端均不處理（經過另外的圖片服務處理圖片）：網易微博、花田

另外淘寶網的處理方式是提供原圖和壓縮圖上傳兩種方式供用戶選擇，屬於前端壓縮

2、參考方案

(1)前端處理圖片

   即前端flash對圖片進行預覽、旋轉和exif自動旋轉、縮放等操做，最後生成的圖片是被壓縮過的圖片。

優勢：交互容易實現、發送的數據量小、firefox的cookie問題獲得解決、服務器壓力獲得分散……

缺點：旋轉預覽等操做在flash裏面所以後期樣式上的擴展不容易、無精確上傳進度、content-type可能須要改變而引發的後端須要作特殊處理……

(2)前端不處理圖片，後端壓縮，並提供旋轉接口

   即前端按照如今的方式不變，後端自動旋轉後返回地址，前端展現，再旋轉時用後端提供的接口。

   優勢：後期樣式擴展性容易、精確上傳進度、旋轉接口可複用在其餘功能或其餘項目裏……

缺點：服務器壓力大、發送數據量大、firefox下cookie有問題……

4、總結

　　若是圖片上傳功能是網站經常使用的功能，建議圖片在上傳前進行壓縮。因爲flash對二進制數據的處理有很好的支持，所以能夠靈活構造http請求，數據形式能夠是二進制數據、表單數據甚至文本圖片數據，綜上所述flash技術是圖片上傳的最優方案。最後想說上傳方案能夠靈活處理，綜合先後端意見得出合適方案。

 

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

做者：綠色花園

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

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