单图片下载与多图片打包下载

  import JSZip from 'jszip'
  import FileSaver from 'file-saver'

  // 判断单张图片还是多张图片
  const downloadImg = list => {
    if (Array.isArray(list)) {
      handleBatchDownload(list)
    } else {
      imageDownload(list)
    }
  }
  
  // 单个文件下载
  const imageDownload = src => {
    let canvas = document.createElement('canvas')
    let img = document.createElement('img')
    img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      let context = canvas.getContext('2d')
      context.drawImage(img, 0, 0, img.width, img.height)
      canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height)
      canvas.toBlob(blob => {
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = '抓拍'
        link.click()
      }, "image/jpeg", "1")
      setModalLoading(false)
    }
    img.setAttribute("crossOrigin", 'Anonymous')
    img.src = src
  }

  const getFile = (url) => {
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url,
        responseType: 'arraybuffer',
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Disposition": "attachment"
        },
      }).then(data => {
        resolve(data.data)
      }).catch(error => {
        reject(error.toString())
      })
    })
  };
  
  // 批量下载引入了两个包，JSZip用于创建打包文件，FileSaver用于下载
  const handleBatchDownload = async(selectImgList) => {
    const data = selectImgList;
    const zip = new JSZip()
    const cache = {}
    const promises = []
    setModalLoading(true)
    await data.forEach((item, index) => {
        const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
        let file_name = `抓拍(${index+1}).jpg` // 获取文件名
        zip.file(file_name, data, {
          binary: true
        }) // 逐个添加文件
        cache[file_name] = data
      })
      promises.push(promise)
    })
    Promise.all(promises).then(() => {
      zip.generateAsync({
        type: "blob"
      }).then(content => { // 生成二进制流
        FileSaver.saveAs(content, "抓怕.zip") // 利用file-saver保存文件
      })
    })
  };