手機用戶拍的照片通常會有2M以上，這對服務器帶寬產生較大壓力。
因此在某些應用下（對圖片要求不那麼高）我們可以在客戶端來壓縮圖片，然後再提交給服務器。
總體思路是：
1. 使用HTML5的FileReader接口來讀取用戶上傳的圖片
2. 使用canvas drawImage接口繪製到Canvas 2d中
3. 使用canvas toDataUrl接口把圖片轉成base64編碼字符串（這裏可以降低圖片質量）
4. 完成image src的替換後，表單提交時，就提交新的被壓縮過的圖像
這裏不重複貼代碼，直接看在線演示：http://wow.techbrood.com/fiddle/30625
該方案支持IE10+, FF, Chrome, Safari等現代瀏覽器。
有兩點需要注意：
1. 注意在FF下，類似這樣的處理方案必須確保canvas繪製和toDataUrl的處理是同步進行的，
也就是不能是異步處理的，否則可能會出現其他事件觸發頁面組合（Composite）而導致canvas緩存被清空的情況，那樣toDataUrl出來的會是空白字符串。
2. 需要等image加載完成再做draw和轉換的動作，否則一些瀏覽器會有問題。