"朱哥，昨天試了幾把圖片上傳的功能，感覺還不錯，不過有個小問題！"
老朱：“什么問題？”
小白：“小圖片上傳還好說，大圖片上傳的時候經常會卡頓一下。”
老朱：“恩，很多人上傳圖片的時候都是直接上傳原圖的，很多相機照的原圖大小都在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成長之路》的動力！
