H5活動已十分普遍，其中一種形式是讓用戶上傳圖片進行參與。移動端上傳圖片，用戶一般都是上傳手機相冊中的圖片，而現在手機的拍攝質量越來越高，一般單張照片的尺寸都在3M左右。若直接上傳，十分耗流量，并且體驗效果也不佳。因此需要在上傳之前，先進行本地壓縮。
接下來總結在h5活動的開發中圖片壓縮上傳的功能，并標記其中踩過的幾個坑，分享給大家：
小白區必看
對于移動端圖片上傳毫無概念的話，需要補充FileReader、Blob、FormData三個概念。
1.FileReader
定義
使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容,可以使用File對象或者Blob對象來指定所要處理的文件或數據.
方法
事件處理程序
使用
| 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)，二進制大對象，是一個可以存儲二進制文件的容器。
3.FormData
利用FormData對象,你可以使用一系列的鍵值對來模擬一個完整的表單,然后使用XMLHttpRequest發送這個”表單”.
正題
移動端圖片壓縮上傳過程：
1）input file上傳圖片，使用FileReader讀取用戶上傳的圖片；
2）圖片數據傳入img對象，將img繪制到canvas上，再使用canvas.toDataURL進行壓縮；
3）獲取壓縮后的base64格式圖片數據，轉成二進制，塞入formdata，最后通過xmlHttpRequest提交formdata;
1.獲取圖片數據
