“朱哥，昨天試了幾把圖片上傳的功能，感覺還不錯，不過有個小問題！”
老朱：“什麼問題？”
小白：“小圖片上傳還好說，大圖片上傳的時候經常會卡頓一下。”
老朱：“恩，很多人上傳圖片的時候都是直接上傳原圖的，很多相機照的原圖大小都在4M左右，上傳的圖片如果都是這麼大，不但使用者覺得你的網站速度慢，還非常佔伺服器空間。”
小白：“哦，確實是，很多人壓根不知道自己上傳的圖片到底有多大。”
老朱：“所以我們要讓使用者進行傻瓜式操作，圖片壓縮的功能就必不可少。今天我們就用canvas來做一下圖片壓縮的處理。我們在昨天的基礎上增加canvas功能就可以了。”
老朱：“在縮圖下面增加一個canvas，canvas有一個toDataURL方法，可以把當前的canvas繪製的內容進行圖片壓縮並轉換為base64編碼，有了base64編碼我們就可以傳送給圖片上傳的php頁面進行圖片上傳了。”
老朱繼續說道：“知道了壓縮的方法，我們只需要解決如果把選擇的檔案繪製到canvas上面就可以了。還記得我們之前繪製圖片的時候用到的Image物件麼？”
“記得，繪製圖像的時候需要例項化一個Image物件，然後設定Image物件的圖片地址src，當圖片載入完成以後把圖片繪製到canvas上。”
老朱：“恩，流程還記得，不錯。Image物件的src屬性也可以接收圖片base64編碼，因此我們可以這樣來做。”
“這裡我把canvas的寬度設定在500畫素，高度根據圖片高度進行等比例變化，你可以看一下繪製的效果。”
你看看這張圖片的原始大小資訊：
“現在透過imgdata=canvas。toDataURL（‘image/jpeg’，0。3）；把canvas資訊壓縮並轉為base64編碼存到imgdata裡面，然後透過jQuery的ajax把imgdata傳送給圖片上傳的php頁面就可以了。”
“透過canvas上傳以後圖片的大小下降到9。65K，應該說是沒非常理想了。透過canvas壓縮後上傳最大的好處是圖片在客戶端進行處理，處理好以後再往伺服器傳送，這樣傳輸的資料大小就非常小了。”
老朱最後說：“剛剛我們透過canvas實現了圖片壓縮上傳，真正開發的時候情況會比這個稍微複雜點，我跟你大概說一下，你記住就行了。1、動態生成canvas，這樣做的好處是canvas不會顯示在頁面上。2、判斷圖片大小，如果圖片大小比較小不用壓縮直接上傳就可以，圖片大再進行壓縮。3、有時你可能需要隱藏input file，比如上傳頭像的功能，使用者點選頭像進行選擇圖片上傳，這時就需要透過點選頭像的事件呼叫input file的點選事件來選擇圖片。這幾個技巧你有時間了可以自己實現一下，不是特別麻煩，我們之前學過的知識足夠你解決它們了。”
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！
