需求：點(diǎn)擊【批量下載】按鈕，將多張canvas圖片下載為壓縮包。

1.需要用到jszip，在項(xiàng)目中安裝：npm install jszip

2.實(shí)現(xiàn)下載

const download = () => {
  let imgs = [bg1, bg2, bg3];
  let canvasList: any[] = [];

  let request = imgs.map(e => getBase64Image(e));
  // 在渲染圖片時(shí)，img.onload方法是同步的，如果圖片過大，會(huì)導(dǎo)致圖片一張一張被刷出來，影響視覺效果
  // 所以將圖片的繪制封裝為Promise函數(shù)，使用Promise.all來獲取繪制結(jié)果，當(dāng)全部圖片都繪制成功后，再開始下載圖片
  Promise.all(request)
    .then(res => {
      canvasList = res;
      getZip();
    })
    .catch(err => {
      console.log(err);
    });

  function getBase64Image(path: any) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = path;
      img.onload = function () {
        resolve(imgTobase64(img));
      };
      if (!path) {
        reject("image error");
      }
    });
  }
  function imgTobase64(img: any) {
    const canvas = document.createElement("canvas");
    canvas.width = 300;
    canvas.height = 300;
    let ctx = canvas.getContext("2d")!;
    ctx.drawImage(img, 0, 0, 300, 300);
    return canvas.toDataURL();
  }

  function getZip() {
    //創(chuàng)建JSZip實(shí)例對(duì)象
    let zip = new JSZip();
    // 創(chuàng)建文件夾
    let imgFolder = zip.folder("example")!;
    for (let i = 0; i < canvasList.length; i++) {
      // 將base64格式轉(zhuǎn)為文件，加入文件夾
      imgFolder.file(`${i + 1}.png`, base64ImgtoFile(canvasList[i]), { base64: true });
    }
    // 生成zip文件并下載
    zip
      .generateAsync({
        type: "blob", // 壓縮類型
        compression: "DEFLATE", // STORE：默認(rèn)不壓縮 DEFLATE：需要壓縮
        compressionOptions: {
          level: 9, // 壓縮等級(jí)1~9 1壓縮速度最快，9最優(yōu)壓縮方式
        },
      })
      .then(function (content) {
        // 下載的文件名
        let filename = "download.zip";
        // 創(chuàng)建隱藏的可下載鏈接
        let eleLink = document.createElement("a");
        eleLink.download = filename;
        eleLink.style.display = "none";
        // 下載內(nèi)容轉(zhuǎn)變成blob地址
        eleLink.href = URL.createObjectURL(content);
        // 觸發(fā)點(diǎn)擊
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);
      });

    function base64ImgtoFile(dataurl: any, filename = "file") {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      // atob : 解碼使用 base-64 編碼的字符串
      let bstr = window.atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    }
  }
};