實現(xiàn)流程：

• 獲取<input type="file">上傳的文件；

• 使用FileReader讀取圖片，并新建一個Image對象將FileReader讀取的圖片數(shù)據(jù)放進去；

• 使用canvas將Image對象等比縮放并寫入到畫布中，保存為base64格式的數(shù)據(jù)（這里使用的是FormData對象上傳，其實這里已經(jīng)可以直接將base64的數(shù)據(jù)通過ajax使用post方法上傳到服務(wù)器，即可避免下面兩個步驟）；

• 新建一個Blob對象將base64數(shù)據(jù)放入；

• 使用FormData對象上傳到第三方云儲存服務(wù)器；

使用HTML原生<input type="file">上傳圖片，下面是踩的一些小坑：

• accept設(shè)定上傳文件的類型，這里直接用image/*，不指定具體的后綴名，否則部分安卓手機下無法上傳圖片；

• 添加multiple屬性可選取多張圖片（本例只做選取單張圖片）；

• capture="camera"屬性可以調(diào)用攝像頭（添加此屬性在iPhone下會直接調(diào)用攝像頭，而不會讀取相冊；且目前安卓和ios設(shè)備使用accept="image/*"均可選擇使用攝像頭拍照還是使用相冊的圖片，所以該屬性可以忽略）。

<input id="imgUpload" type="file" onchange="addPic" accept="image/*" />

當(dāng)input文件觸發(fā)change事件后獲取上傳的文件

function addPic(e){    if (typeof FileReader === 'undefined') {      return alert('你的瀏覽器不支持上傳圖片喲！');    }    var files = e.target.files || e.dataTransfer.files;    if(files.length > 0){      imgResize(file[0], callback);    }  }

使用FileReader獲取圖片數(shù)據(jù)，并使用canvas壓縮

• ios手機拍照會旋轉(zhuǎn)90度，這里必須判斷是否ios手機做出相應(yīng)處理后再上傳

function imgResize(file, callback){    var fileReader = new FileReader();    fileReader.onload = function(){      var IMG = new Image();      IMG.src = this.result;      IMG.onload = function(){        var w = this.naturalWidth, h = this.naturalHeight, resizeW = 0, resizeH = 0;        // maxSize 是壓縮的設(shè)置，設(shè)置圖片的最大寬度和最大高度，等比縮放，level是報錯的質(zhì)量，數(shù)值越小質(zhì)量越低        var maxSize = {          width: 500,          height: 500,          level: 0.6        };        if(w > maxSize.width || h > maxSize.height){          var multiple = Math.max(w / maxSize.width, h / maxSize.height);          resizeW = w / multiple;          resizeH = w / multiple;        } else {          // 如果圖片尺寸小于最大限制，則不壓縮直接上傳          return callback(file)        }        var canvas = document.createElement('canvas'),        ctx = canvas.getContext('2d');        if(window.navigator.userAgent.indexOf('iPhone') > 0){          canvas.width = resizeH;          canvas.height = resizeW;          ctx.rorate(90 * Math.PI / 180);          ctx.drawImage(IMG, 0, -resizeH, resizeW, resizeH);        }else{          canvas.width = resizeW;          canvas.height = resizeH;          ctx.drawImage(IMG, 0, 0, resizeW, resizeH);        }        var base64 = canvas.toDataURL('image/jpeg', maxSize.level);        convertBlob(window.atob(base64.split(',')[1]), callback);      }    };    fileReader.readAsDataURL(file);  }

將base64的數(shù)據(jù)轉(zhuǎn)換成一個Blob對象

• 安卓手機不支持Blob構(gòu)造方法

function convertBlob(base64, callback){    var buffer = new ArrayBuffer(base64.length);    var ubuffer = new Uint8Array(buffer);    for (var i = 0; i < base64.length; i++) {      ubuffer[i] = base64.charCodeAt(i)    }    var blob;    try {      blob = new Blob([buffer], {type: 'image/jpg'});    } catch (e) {      window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;      if(e.name === 'TypeError' && window.BlobBuilder){        var blobBuilder = new BlobBuilder();        blobBuilder.append(buffer);        blob = blobBuilder.getBlob('image/jpg');      }    }    callback(blob)  }

使用HTML5的FormData對象上傳數(shù)據(jù)

function callback(fileResize){    var data = new FormData();    data.append('file', fileResize);    var config = {      headers: {'Content-Types': 'multipart/form-data'}    };    // 這里用的es6語法發(fā)起請求，可以無視    axios.post(url, data, config).then().catch(e){}  }

【相關(guān)推薦】

1. 免費h5在線視頻教程

2. HTML5 完整版手冊

3. php.cn原創(chuàng)html5視頻教程