瀏覽器上傳圖片技術的一點分析
一、常見傳圖方法分析
|
對比項 方法 |
開發成本 |
兼容性 |
程序效率 |
處理圖像能力 |
其他高級圖像處理能力 |
是否需要後端特殊處理 |
|
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
==================================================