一、具體代碼

1、利用canvas壓縮圖片方法一

  // 第一種壓縮圖片方法（圖片base64,圖片類型,壓縮比例,回調函數）
  // 圖片類型是指 image/png、image/jpeg、image/webp(僅Chrome支持)
  // 該方法對以上三種圖片類型都適用 壓縮結果的圖片base64與原類型相同
  // 壓縮結果存在誤差 壓縮比例只能作為范圍參考
  function compressImg(base64, type, rate, callback) {
    // 聲明一個Image對象
    var _img = new Image();
    // 將圖片的地址賦予這個Image
    _img.src = base64;
    // 在圖片加載完成后
    _img.onload = function () {
      // 創建canvas標簽
      var _canvas = document.createElement("canvas");
      // 根據壓縮比例設置canvas畫布的寬高屬性
      // this 指的是當前Image對象
      var w = this.width * rate;
      var h = this.height * rate;
      _canvas.setAttribute("width", w);
      _canvas.setAttribute("height", h);
      // 將圖片渲染到canvas畫布上 并設置渲染圖片的寬高與畫布的寬高一致
      _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
      // 將canvas畫布轉換成對應類型的base64 
      var base64 = _canvas.toDataURL(type);
      // 將結果通過回調函數傳遞給方法的調用者
      callback(base64);
    };
  }

2、利用canvas壓縮圖片方法二

  // 第二種壓縮圖片的方法（圖片base64,圖片類型,壓縮比例,回調函數）
  // 該方法只能將圖片壓縮為為image/jpeg和image/webp兩種類型的圖片base64
  // 壓縮結果存在一定誤差  但比第一種方法更加準確
  function compressImg2(base64, rate, callback) {
    // 聲明一個Image對象
    var _img = new Image();
    // 將圖片的地址賦予這個Image
    _img.src = base64;
    // 在圖片加載完成后
    _img.onload = function () {
      // 創建canvas標簽
      var _canvas = document.createElement("canvas");
      // 設置canvas畫布的寬高屬性
      // this 指的是當前Image對象
      var w = this.width;
      var h = this.height;
      _canvas.setAttribute("width", w);
      _canvas.setAttribute("height", h);
      // 將圖片渲染到canvas畫布上 并設置渲染圖片的寬高與畫布的寬高一致
      _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
      // 將canvas畫布轉換成base64 但第一個參數 轉換后的圖片類型只能為image/jpeg或image/webp
      // 根據壓縮比例設置第二個參數圖片質量（范圍0-1）
      var base64 = _canvas.toDataURL('image/jpeg',rate);
      // 將結果通過回調函數傳遞給方法的調用者
      callback(base64);
    };
  }

3、調用壓縮方法

// 圖片base64
const base64 = 'data:image/****;base64,*****'
console.log('壓縮前的圖片---',base64);
// 獲取圖片的類型
const type =file.type

// 調用壓縮方法一
compressImg(res.data,type,0.6,(res2) => {
	console.log('這是第一種方法壓縮0.6倍后的圖片：---',res2)
})
// 調用壓縮方法二
compressImg2(res.data,0.6,(res3) => {
	console.log('這是第二種方法壓縮0.6倍后的圖片：---',res3)
})

4、代碼解析

? 這兩種壓縮圖片的方法，是借助于Image和canvas實現的，整體區別不大，前半部分都是先將base64圖片通過src渲染到一個Image中，當圖片加載完成，觸發onload事件后，創建一個canvas元素。區別主要是后半部分：

? 第一種方法是在創建canvas元素后，設置其寬高為圖片原來寬高*壓縮比例，然后將圖片渲染到canvas元素上，同時設置渲染圖片的寬高與canvas寬高一致，最后通過toDataURL(type)將canvas畫布轉成base64，參數type設置為原來的圖片類型。其主要原理是通過壓縮寬高來實現壓縮圖片的大小，但壓縮結果誤差較大。

? 第二種方法是在創建canvas元素后，設置其寬高與圖片原本寬高一致，并將圖片渲染到canvas元素上，同時設置渲染圖片的寬高與canvas寬高一致，但是在通過toDataURL()將canvas畫布轉成base64時，第一個參數設置圖片類型為：image/jpeg或image/webp，第二個參數設置圖片的質量，范圍是0-1。其主要原理是改變圖片的質量來實現壓縮圖片的大小，壓縮結果相對準確一些。

5、HTMLCanvasElement.toDataURL([type,encoderOptions])

? 該方法是canvas元素實例的一個方法，參數有兩個，都是可選參數：type - 輸出圖片的類型，默認為image/png類型，常見的類型有：image/png、image/jpeg、image/webp(僅Chrome支持)，圖片的分辨率為 96dpi； encoderOptions - 當第一個參數指定圖片類型為 image/jpeg 或 image/webp 的情況下，可以通過該參數設置輸出圖片的質量，取值區間是0-1，默認為0.92，當超出取值區間時，會使用默認值。

? 該方法的返回值是一個包含圖片信息的Data URL，也可以看成圖片的base64字符串。但如果調用該方法的canvas元素的寬或高為0，則返回值為字符串"data:,"，、

瀏覽器兼容性：

6、相關文檔：

前端FileReader對象實現圖片file文件轉base64

前端將base64圖片轉換成file文件

toDataURL

Data URL