摘要：上周做一個(gè)關(guān)于移動(dòng)端圖片壓縮上傳的功能。利用，進(jìn)行圖片的壓縮，得到圖片的的值上傳文件。

上周做一個(gè)關(guān)于移動(dòng)端圖片壓縮上傳的功能。期間踩了幾個(gè)坑，在此總結(jié)下。

大體的思路是，部分API的兼容性請(qǐng)參照caniuse：

利用FileReader,讀取blob對(duì)象,或者是file對(duì)象，將圖片轉(zhuǎn)化為data uri的形式。

使用canvas,在頁面上新建一個(gè)畫布,利用canvas提供的API,將圖片畫入這個(gè)畫布當(dāng)中。

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

上傳文件。

步驟1當(dāng)中，在進(jìn)行圖片壓縮前，還是對(duì)圖片大小做了判斷的，如果圖片大小大于200KB時(shí)，是直接進(jìn)行圖片上傳，不進(jìn)行圖片的壓縮，如果圖片的大小是大于200KB，則是先進(jìn)行圖片的壓縮再上傳:

    var fileChooser = document.getElementById("choose"),
        maxSize = 200 * 1024;   //200KB
    fileChoose.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);    //圖片首先進(jìn)行壓縮
                    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進(jìn)行繪圖
        
        //將原來圖片的質(zhì)量壓縮到原先的0.2倍。
        var data = canvas.toDataURL("image/jpeg", 0.2); //data url的形式
        
        return data;
    }

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

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

在IOS中，當(dāng)圖片的大小大于 2MB時(shí)，會(huì)出現(xiàn)圖片壓扁的情況，這個(gè)時(shí)候需要重置圖片的比例。解決方法請(qǐng)戳我

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

IOS8.1的版本中有個(gè)FileReader的bug: FileReader讀取的圖片轉(zhuǎn)化為Base64時(shí)，字符串為空，具體的問題描述請(qǐng)戳我

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

將圖片轉(zhuǎn)化為base64

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

方式1可以通過xhr ajax或者xhr2 FormData進(jìn)行提交。

方法2這里就有個(gè)大坑了。具體描述請(qǐng)戳我

簡(jiǎn)單點(diǎn)說就是：Blob對(duì)象是無法注入到FormData對(duì)象當(dāng)中的。

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

    var ndata = compress(img);
    ndata = window.atob(ndata); //將base64格式的數(shù)據(jù)進(jìn)行解碼
    
    //新建一個(gè)buffer對(duì)象，用以存儲(chǔ)圖片數(shù)據(jù)
    var buffer = new Uint8Array(ndata.length);
    for(var i = 0; i < text.length; i++) {
        buffer[i] = ndata.charCodeAt(i);
    }
    
    //將buffer對(duì)象轉(zhuǎn)化為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對(duì)象中有需要進(jìn)行兼容性的處理，特別是對(duì)于不支持FormData上傳blob的andriod機(jī)的兼容性處理。具體的方法請(qǐng)戳我
主要實(shí)現(xiàn)的細(xì)節(jié)是通過重寫HTTP請(qǐng)求。

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

Android4.4下由于系統(tǒng)WebView的openFileChooser接口更改，導(dǎo)致無法選擇文件，從而導(dǎo)致無法上傳文件. bug描述請(qǐng)戳我