技術標籤：前端ReactH5圖片壓縮

目錄

第一步：獲取file檔案

第二步：將獲取的檔案進行base64編碼

第三步：利用canvas壓縮圖片

第四步：將壓縮後的base64編碼圖片轉為File型別

第五步：利用FormData上傳

第一步：獲取file檔案

預設已獲取到使用者選擇的圖片File，請參考其他資料。

File檔案內容參考如下圖，如果你拿到這樣的資料，這一步就完成了。

第二步：將獲取的檔案進行base64編碼

如下圖 imgBase64就是base64編碼之後的圖片，這裡注意this指向問題

getBase64Image(file:any){
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = ()=>{
      let imgBase64 =  reader.result;
           
    }
}
 

第三步：利用canvas壓縮圖片

此方法我寫在了另一個檔案裡，然後匯入進行呼叫，回撥函式裡包含了壓縮後的base64檔案

//圖片壓縮
  /**
  * 圖片壓縮（利用canvas）
  * @param  path     base64圖片
  * @param  obj      壓縮配置quality，不傳則按比例壓縮，預設0.5
  * @param  callback  回撥函式
  */
 export const dealImageCompression = (path, obj,callback)  =>{
  let img = new Image();
  img.src = path;

  img.onload = function () {
    let that = this;
    // 預設按比例壓縮
    let w = img.width,
      h = img.height,
      scale = w / h;
    
    // 預設圖片質量為0.5
    let quality = 0.5;
    if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
      quality = obj.quality;
    }

    w = w>300 ? w*quality : w;
    h = w>300 ?  w / scale : h;
    
    //生成canvas
    let canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(img, 0, 0, w, h);

    // 回撥函式返回base64的值
    var base64 = canvas.toDataURL('image/jpeg', quality);
    debugger;
    callback(base64);
  }
}
 

第四步：將壓縮後的base64編碼圖片轉為File型別

由於上傳是使用file方式，所以壓縮後需要再將base64編碼圖片轉為file檔案

File繼承於Blob，擴充套件了一些屬性（檔名、修改時間、路徑等）。正常場景下，使用Bolb物件就可以。因為少了幾個資料，如檔名name，所以第五步需要把name拼接上。

如下圖，返回的即為file檔案。

export const  dataURItoBlob = (dataurl) =>{   //dataurl是base64格式
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
};
 

第五步：利用FormData上傳

注意，下圖中的引數，file為原始的file，newfile是第四步壓縮後的file，然後就可以進行相關網路請求上傳了。

const formData = new FormData();
formData.append("uploadFile", newfile,file.name);