需求：我這個(gè)是有圖片的src地址，但是圖片太大，加載慢，所以需要壓縮，市面上的好多需求都是在上傳的時(shí)候進(jìn)行壓縮，我這個(gè)案例是對(duì)src進(jìn)行壓縮成base64然后加載

1.安裝compressorjs

npm install compressorjs

2.引用

import Compressor from "compressorjs";

3.js代碼

//imageMap :{id:base64url} 是一個(gè)對(duì)象，如果壓縮就用小圖地址，如果不壓縮就用大圖地址
//獲取壓縮后圖片的base64地址，并且組成一個(gè)新對(duì)象
//imgList:[ { FileId:'',src:'' } ]
    async getImageMap() {
      let temp = {};
      try {
        for (let i = 0; i < this.imgList.length; i++) {
          let item = this.source[i];
          let bigSrc = item.src;
          let smallSrc = await this.pathToBlob(bigSrc);
          if (this.isCompressor) {
            temp[item.FileId] = smallSrc;
          } else {
            temp[item.FileId] = bigSrc;
          }
        }
      } catch (e) {}
      this.imageMap = temp;
    },
//圖片路徑變blob
    pathToBlob(path) {
      return new Promise((resolve, reject) => {
        fetch(path)
          .then((response) => {
            return response.blob();
          })
          .then((blob) => {
            this.handleImageCompressor(blob)
              .then((res) => {
                resolve(res);
              })
              .catch((e) => {
                reject(e);
              });
          });
      });
    },
 //圖片壓縮
    handleImageCompressor(blob) {
      return new Promise((resolve, reject) => {
        const file = new File([blob], "圖片.jpg", { type: "image/jpeg" });
        new Compressor(file, {
          quality: 0.3, // 壓縮質(zhì)量，0.6表示60%
          success: (result) => {
            // 壓縮成功后，將壓縮后的圖片轉(zhuǎn)換為base64或blob
            const reader = new FileReader();
            reader.onload = (e) => {
              resolve(e.target.result);
            };
            reader.readAsDataURL(result);
          },
          error: (e) => {
            reject(e);
          },
        });
      });
    },

4.html使用

 <img :src="imageMap[FileId]" />