利用HTML5實現圖片壓縮上傳的案例

這篇文章主要介紹了利用HTML5實現圖片壓縮上傳的案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

實現流程：

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

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

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

• 新建一個Blob對象將base64數據放入；

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

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

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

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

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

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

當input文件觸發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獲取圖片數據，并使用canvas壓縮

• ios手機拍照會旋轉90度，這里必須判斷是否ios手機做出相應處理后再上傳

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 是壓縮的設置，設置圖片的最大寬度和最大高度，等比縮放，level是報錯的質量，數值越小質量越低
      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的數據轉換成一個Blob對象

• 安卓手機不支持Blob構造方法

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對象上傳數據

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

感謝你能夠認真閱讀完這篇文章，希望小編分享利用HTML5實現圖片壓縮上傳的案例內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!