分享利用HTML5實作圖片壓縮上傳的實例程式碼

實作流程：

• 取得上傳的檔案;

• ##使用FileReader讀取圖片，並新建一個Image物件將FileReader讀取的圖片資料放進去；

• #使用canvas將Image物件等比縮放並寫入到畫布中，儲存為base64格式的資料（這裡使用的是FormData物件上傳，其實這裡已經可以直接將base64的資料透過ajax使用post方法上傳到伺服器，即可避免下面兩個步驟）；

• 新建一個Blob物件將base64資料放入；

• 使用FormData物件上傳到第三方雲端儲存伺服器；

使用HTML原生上傳圖片，以下是踩的一些小坑：

• 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: &#39;image/jpg&#39;});
  } catch (e) {
    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
    if(e.name === &#39;TypeError&#39; && window.BlobBuilder){
      var blobBuilder = new BlobBuilder();
      blobBuilder.append(buffer);
      blob = blobBuilder.getBlob(&#39;image/jpg&#39;);
    }
  }
  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){}
}

【相關推薦】

#1.

 免費h5線上影片教學

2. 

HTML5 完整版手冊

3. 

php.cn原始html5影片教學

以上是分享利用HTML5實作圖片壓縮上傳的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！