一、具體代碼

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

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

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

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

3、調(diào)用壓縮方法

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

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

4、代碼解析

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

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

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

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

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

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

瀏覽器兼容性：

6、相關(guān)文檔：

前端FileReader對象實(shí)現(xiàn)圖片file文件轉(zhuǎn)base64

前端將base64圖片轉(zhuǎn)換成file文件

toDataURL

Data URL