H5活動(dòng)已十分普遍，其中一種形式是讓用戶上傳圖片進(jìn)行參與。移動(dòng)端上傳圖片，用戶一般都是上傳手機(jī)相冊(cè)中的圖片，而現(xiàn)在手機(jī)的拍攝質(zhì)量越來越高，一般單張照片的尺寸都在3M左右。若直接上傳，十分耗流量，并且體驗(yàn)效果也不佳。因此需要在上傳之前，先進(jìn)行本地壓縮。
接下來總結(jié)在h5活動(dòng)的開發(fā)中圖片壓縮上傳的功能，并標(biāo)記其中踩過的幾個(gè)坑，分享給大家：
小白區(qū)必看
對(duì)于移動(dòng)端圖片上傳毫無概念的話，需要補(bǔ)充FileReader、Blob、FormData三個(gè)概念。
1.FileReader
定義
使用FileReader對(duì)象,web應(yīng)用程序可以異步的讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容,可以使用File對(duì)象或者Blob對(duì)象來指定所要處理的文件或數(shù)據(jù).
方法
事件處理程序
使用
| var fileReader = new FileReader();fileReader.onload = function() { var url = this.result;}//orfileReader.onload = function(e) { var url = e.target.result;} |
2.Blob
BLOB(binary large object)，二進(jìn)制大對(duì)象，是一個(gè)可以存儲(chǔ)二進(jìn)制文件的容器。
3.FormData
利用FormData對(duì)象,你可以使用一系列的鍵值對(duì)來模擬一個(gè)完整的表單,然后使用XMLHttpRequest發(fā)送這個(gè)”表單”.
正題
移動(dòng)端圖片壓縮上傳過程：
1）input file上傳圖片，使用FileReader讀取用戶上傳的圖片；
2）圖片數(shù)據(jù)傳入img對(duì)象，將img繪制到canvas上，再使用canvas.toDataURL進(jìn)行壓縮；
3）獲取壓縮后的base64格式圖片數(shù)據(jù)，轉(zhuǎn)成二進(jìn)制，塞入formdata，最后通過xmlHttpRequest提交formdata;
1.獲取圖片數(shù)據(jù)
