上周做一個關于移動端圖片壓縮上傳的功能。期間踩了幾個坑，在此總結下。

大體的思路是，部分API的兼容性請參照caniuse：

利用FileReader,讀取blob對象,或者是file對象，將圖片轉化為data uri的形式。

使用canvas,在頁面上新建一個畫布,利用canvas提供的API,將圖片畫入這個畫布當中。

利用canvas.toDataURL()，進行圖片的壓縮，得到圖片的data uri的值

上傳文件。

步驟1當中，在進行圖片壓縮前，還是對圖片大小做了判斷的，如果圖片大小大于200KB時，是直接進行圖片上傳，不進行圖片的壓縮，如果圖片的大小是大于200KB，則是先進行圖片的壓縮再上傳:

<input type="file" id="choose" accept="image/*"> var fileChooser = document.getElementById("choose"),maxSize = 200 * 1024; //200KBfileChoose.change = function() {var file = this.files[0], //讀取文件reader = new FileReader();reader.onload = function() {var result = this.result, //result為data url的形式img = new Image(),img.src = result;if(result.length < maxSize) { imgUpload(result); //圖片直接上傳} else {var data = compress(img); //圖片首先進行壓縮imgUpload(data); //圖片上傳}}reader.readAsDataURL(file);}

步驟2，3：

var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');function compress(img) {canvas.width = img.width;canvas.height = img.height;//利用canvas進行繪圖//將原來圖片的質量壓縮到原先的0.2倍。var data = canvas.toDataURL('image/jpeg', 0.2); //data url的形式return data;}

在利用canvas進行繪圖的過程中,IOS圖片上傳過程中，存在著這樣的問題：

當你豎著拿手機的時候，拍完照，上傳圖片時，會出現(xiàn)照片自動旋轉的情況，而橫著拍照并上傳圖片時不會出現(xiàn)這個問題。這個時候如果想糾正圖片自動旋轉的情況，將圖片轉化為二進制的數(shù)據(jù)(使用了binaryajax.js)，方便獲取圖片的exif信息，通過獲取exif的信息來確定圖片旋轉的角度(使用了exif.js)，然后再進行圖片相應的旋轉處理。解決方法請戳我

在IOS中，當圖片的大小大于 2MB時，會出現(xiàn)圖片壓扁的情況，這個時候需要重置圖片的比例。解決方法請戳我

利用FileReader，讀取圖片的過程需要花費一定時間,將圖片數(shù)據(jù)注入到canvas畫布中需要一定時間，圖片壓縮的過程中，圖片越大，CPU計算消耗的時間也越長，可能會出現(xiàn)頓卡的情況。總之，就是這個過程當中需要花費一定時間。

IOS8.1的版本中有個FileReader的bug: FileReader讀取的圖片轉化為Base64時，字符串為空，具體的問題描述請戳我

步驟4,文件上傳有2種方式:

將圖片轉化為base64

將圖片數(shù)據(jù)轉為Blob對象，使用FormData上傳文件

方式1可以通過xhr ajax或者xhr2 FormData進行提交。

方法2這里就有個大坑了。具體描述請戳我

簡單點說就是：Blob對象是無法注入到FormData對象當中的。

當你拿到了圖片的data uri數(shù)據(jù)后，將其轉化為Blob數(shù)據(jù)類型

var ndata = compress(img);ndata = window.atob(ndata); //將base64格式的數(shù)據(jù)進行解碼//新建一個buffer對象，用以存儲圖片數(shù)據(jù)var buffer = new Uint8Array(ndata.length);for(var i = 0; i < text.length; i++) {buffer[i] = ndata.charCodeAt(i);}//將buffer對象轉化為Blob數(shù)據(jù)類型var blob = getBlob([buffer]);var fd = new FormData(),xhr = new XMLHttpRequest();fd.append('file', blob);xhr.open('post', url);xhr.onreadystatechange = function() {//do something}xhr.send(fd);

在新建Blob對象中有需要進行兼容性的處理，特別是對于不支持FormData上傳blob的andriod機的兼容性處理。具體的方法請戳我
主要實現(xiàn)的細節(jié)是通過重寫HTTP請求。

---

2月19日更新

在安卓機器中，部分4.x的機型, 在webview里面對file對象進行了閹割，比如你拿不到file.type的值。

2月22日更新

Android4.4下<input type="file">由于系統(tǒng)WebView的openFileChooser接口更改，導致無法選擇文件，從而導致無法上傳文件. bug描述請戳我

封裝好的github庫，請戳我，如果覺得文章不錯，請不要吝嗇你的star~~

總結

以上是生活随笔為你收集整理的移动端H5图片上传的那些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。