H5上傳壓縮圖片

看這個，比較全的 https://github.com/mhbseal/html5ImgCompress ，幾乎全部痛點都解決了！

PC上傳圖片

基本結構

1. form[enctype="multipart/form-data"]
2. input[type="file"]
3. 上傳完畢後，獲取圖片url，顯示到頁面上

問題

1. 圖片要上傳完畢後，才能顯示
2. 壓縮上傳

H5 如何解決

1. FileReader
2. canvas

FileReader

FileReader能夠將File對象轉化成base64，這樣能夠優先展現圖片，而後處理上傳操做。

var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(e) {
    $('img').attr('src', e.target.result);
};

 

FormData

實際的上傳操做，大可能是ajax處理的，FormData能夠用來構建form表單。

var fd = new FormData();
 fd.append('filename', file);
$.ajax({
     url: 'xxxx/yyyy',
     data: fd,
     type: 'POST',
     cache: false,//上傳文件無需緩存
     processData: false,//對於Data參數進行序列化處理
     contentType: false,//必填
     dataType: 'json',
     success: function(data) {
     },
     error: function() {
     }
});

 

canvas

手機的流量是寶貴的，可是上傳個一張照片可能有幾M，全部須要對圖片進行壓縮處理，canvas對圖片的操做是經過base64格式處理的。

var img = new Image();
img.src = base64;
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    canvas.getContext("2d").drawImage(img, 0, 0);
    var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
}

 

上傳base64

使用mqq接口拍照或者獲取本地圖片時，反饋都是base64格式，input在處理過程當中，通過壓縮等操做也可能將File對象轉化成base64，對base64的上傳支持有如下方案：

1. server支持，單獨開接口處理base64上傳
2. 前端將base64轉化成File對象，複用原來的server接口

這裏重點討論第2中方案。JS提供了Blob對象，是一個類文件對象，File對象繼承了Blob對象，而且作了一些擴展。基於此，只須要把base64轉化成Blob對象便可。Blob的構造參考這裏，能夠使用類型數據來處理。

// 解碼base64 var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // 類型數組 var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString });