React 通过图片链接，打包下载图片

jszip file-saver

import JSZip from "jszip";
import FileSaver from "file-saver";

const getBase64Image = (img) => {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
  return canvas.toDataURL("image/" + ext);
};

const toZip = (imgSrcList = [], fileName = "") => {
  let zip = new JSZip();
  let imgFolder = zip.folder(fileName);
  imgSrcList.forEach((src, i) => {
    let tempImage = new Image();
    tempImage.src = src;
    tempImage.crossOrigin = "*";
    tempImage.onload = () =>
      imgFolder.file(i + 1 + ".jpg", getBase64Image(tempImage).substring(22), {
        base64: true,
      });
  });
  setTimeout(
    () =>
      zip
        .generateAsync({ type: "blob" })
        .then((blob) => FileSaver.saveAs(blob, `${fileName}.zip`)),
    3000
  );
};

export default toZip;

使用

toZip(imgSrcList, fileName);