"朱哥，昨天試了幾把圖片上傳的功能靶擦，感覺還不錯(cuò)腮考，不過(guò)有個(gè)小問(wèn)題！"
老朱：“什么問(wèn)題玄捕？”
小白：“小圖片上傳還好說(shuō)踩蔚，大圖片上傳的時(shí)候經(jīng)常會(huì)卡頓一下∶墩常”
老朱：“恩寂纪，很多人上傳圖片的時(shí)候都是直接上傳原圖的，很多相機(jī)照的原圖大小都在4M左右赌结，上傳的圖片如果都是這么大捞蛋，不但用戶覺得你的網(wǎng)站速度慢，還非常占服務(wù)器空間柬姚∧馍迹”
小白：“哦，確實(shí)是量承，很多人壓根不知道自己上傳的圖片到底有多大搬设。”
老朱：“所以我們要讓用戶進(jìn)行傻瓜式操作撕捍，圖片壓縮的功能就必不可少拿穴。今天我們就用canvas來(lái)做一下圖片壓縮的處理。我們?cè)谧蛱斓幕A(chǔ)上增加canvas功能就可以了忧风∧”
老朱：“在縮略圖下面增加一個(gè)canvas，canvas有一個(gè)toDataURL方法狮腿，可以把當(dāng)前的canvas繪制的內(nèi)容進(jìn)行圖片壓縮并轉(zhuǎn)換為base64編碼腿宰，有了base64編碼我們就可以發(fā)送給圖片上傳的php頁(yè)面進(jìn)行圖片上傳了≡迪幔”
老朱繼續(xù)說(shuō)道：“知道了壓縮的方法吃度，我們只需要解決如果把選擇的文件繪制到canvas上面就可以了。還記得我們之前繪制圖片的時(shí)候用到的Image對(duì)象么贴硫？”
“記得椿每，繪制圖像的時(shí)候需要實(shí)例化一個(gè)Image對(duì)象，然后設(shè)定Image對(duì)象的圖片地址src，當(dāng)圖片加載完成以后把圖片繪制到canvas上间护∩咀常”
老朱：“恩，流程還記得兑牡，不錯(cuò)央碟。Image對(duì)象的src屬性也可以接收?qǐng)D片base64編碼，因此我們可以這樣來(lái)做均函∫谒洌”
“這里我把canvas的寬度設(shè)定在500像素，高度根據(jù)圖片高度進(jìn)行等比例變化苞也，你可以看一下繪制的效果洛勉。”
你看看這張圖片的原始大小信息：
“現(xiàn)在通過(guò)imgdata=canvas.toDataURL('image/jpeg',0.3);把canvas信息壓縮并轉(zhuǎn)為base64編碼存到imgdata里面如迟，然后通過(guò)jQuery的ajax把imgdata發(fā)送給圖片上傳的php頁(yè)面就可以了收毫。”
“通過(guò)canvas上傳以后圖片的大小下降到9.65K殷勘，應(yīng)該說(shuō)是沒非常理想了此再。通過(guò)canvas壓縮后上傳最大的好處是圖片在客戶端進(jìn)行處理，處理好以后再往服務(wù)器發(fā)送玲销，這樣傳輸?shù)臄?shù)據(jù)大小就非常小了输拇。”
老朱最后說(shuō)：“剛剛我們通過(guò)canvas實(shí)現(xiàn)了圖片壓縮上傳贤斜，真正開發(fā)的時(shí)候情況會(huì)比這個(gè)稍微復(fù)雜點(diǎn)策吠，我跟你大概說(shuō)一下，你記住就行了瘩绒。1猴抹、動(dòng)態(tài)生成canvas，這樣做的好處是canvas不會(huì)顯示在頁(yè)面上锁荔。2蟀给、判斷圖片大小，如果圖片大小比較小不用壓縮直接上傳就可以堕战，圖片大再進(jìn)行壓縮坤溃。3拍霜、有時(shí)你可能需要隱藏input file嘱丢，比如上傳頭像的功能，用戶點(diǎn)擊頭像進(jìn)行選擇圖片上傳祠饺，這時(shí)就需要通過(guò)點(diǎn)擊頭像的事件調(diào)用input file的點(diǎn)擊事件來(lái)選擇圖片越驻。這幾個(gè)技巧你有時(shí)間了可以自己實(shí)現(xiàn)一下，不是特別麻煩，我們之前學(xué)過(guò)的知識(shí)足夠你解決它們了缀旁〖桥”
想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力并巍！
