H5壓縮圖片上傳（FileReader +canvas）

標籤：split   app   eve   als   ring   option   har   func   get   

因為最近項目做一個webApp的頁面，需要上傳圖片，總結了一下，思路如下：

一、監聽一個 input (type=‘file‘) 的 change 事件，然後拿到檔案的 file;

<input id="img-input" class="upload-input" type="file" accept="image/*" id="imgbox" multiple/>

二、把 file 轉成 dataURL；

/** * file 轉成 dataURL * @param file 檔案 * @param callback 回呼函數 */function fileToDataURL (file, callback) {  const reader = new window.FileReader();  reader.onload = function (e) {    callback(e.target.result);  };  reader.readAsDataURL(file);}

三、然後用 canvas 繪製圖片，繪製的時候經過演算法按比例裁剪，然後再把 canvas 轉成 dataURL;

/** * 使用 canvas 壓縮 dataURL * @param dataURL * @param ratio * @param callback */function compressDataURL (dataURL, ratio, callback) {  const img = new window.Image();  img.src = dataURL;  // onload  img.onload = function () {    const canvas = document.createElement(‘canvas‘);    const ctx = canvas.getContext(‘2d‘);    canvas.width = 100 * ratio.w;    canvas.height = 100 * ratio.h;    const RATIO = canvas.width / canvas.height;    let cutx = 0;    let cuty = 0;    let cutw = img.width;    let cuth = img.height;    if (cutw / cuth > RATIO) {      // 寬超過比例了]]      let realw = cuth * RATIO;      cutx = (cutw - realw) / 2;      cutw = realw;    } else if (cutw / cuth < RATIO) {      // 長超過比例了]]      let realh = cutw / RATIO;      cuty = (cuth - realh) / 2;      cuth = realh;    }    ctx.drawImage(img, cutx, cuty, cutw, cuth, 0, 0, canvas.width, canvas.height);    const ndata = canvas.toDataURL(‘image/jpeg‘, 1);    callback(ndata);  };}

四、 dataURL 轉成 blob;

/** * dataURL 轉成 blob * @param dataURL * @return blob */function dataURLtoBlob (dataURL) {  let binaryString = atob(dataURL.split(‘,‘)[1]);  let arrayBuffer = new ArrayBuffer(binaryString.length);  let intArray = new Uint8Array(arrayBuffer);  let mime = dataURL.split(‘,‘)[0].match(/:(.*?);/)[1]  for (let i = 0, j = binaryString.length; i < j; i++) {    intArray[i] = binaryString.charCodeAt(i);  }  let data = [intArray];  let result;  try {    result = new Blob(data, { type: mime });  } catch (error) {    window.BlobBuilder = window.BlobBuilder ||      window.WebKitBlobBuilder ||      window.MozBlobBuilder ||      window.MSBlobBuilder;    if (error.name === ‘TypeError‘ && window.BlobBuilder){      var builder = new BlobBuilder();      builder.append(arrayBuffer);      result = builder.getBlob(type);    } else {      throw new Error(‘暫不支援‘);    }  }  return result;}

五、把 blob append 到 FormData 的執行個體對象，然後上傳。

var imgBox =document.getElementById("imgbox");
var blobArr = [];  //參數可以傳給後台imgBox.change = function(e){   var file=this.files;    for(var i=0;i<event.target.files.length;i++){          fileToDataURL(file[i], function(dataURL){               compressDataURL(dataURL,function (newDataURL)  {　　　　　　　　　　　　const newBlob = this.dataURLtoBlob(newDataURL,file[i]);                     //const fileOfBlob = new File([newBlob], file[i].name);   //可將blob轉換成file格式                     blobArr.push(newBlob);               });         });    }        }

//上傳
var formData = new FormData();
for (var i = 0, len = blobArr.file.length; i < len; i++) {
　　formData.append("file" + i, options.file[i]);
}

let xhr = new XMLHttpRequest(); // 進度監聽// xhr.upload.addEventListener(‘progress‘, progFoo, false);// 載入監聽// xhr.addEventListener(‘load‘, loadFoo, false);// 錯誤監聽// xhr.addEventListener(‘error‘, errorFoo, false); xhr.onreadystatechange = function () {　　if (xhr.readyState === 4) {　　　　if (xhr.status === 200) {　　　　// 上傳成功，擷取到結果 results　　　　let results = JSON.parse(xhr.responseText);　　　　// ......　　　　}　　　　} else {　　　　// 上傳失敗　　　　}　　}};　　xhr.open(‘POST‘, ‘/api/upload‘, true);　　xhr.send(formData);});

 

H5壓縮圖片上傳（FileReader +canvas）