打包下载图片

  最近一个月公司新启动一个项目，在中后台管理上有个需求是，让用户能够打包下载已经上传好的图片。就研究下了一下，还踩了几个坑，这里简单记录下功能的实现。

一、安装相关的依赖

• npm install jszip --save

• npm install file-saver --save

二、使用

• 引入下载好的依赖

    import JSZIP from 'jszip'
    import FileSave from 'file-saver'
  

• 实例化 jszip

    const zip = new JSZIP()
  

• 将图片转化为 Base64

    imgToBase64(url, cb) {
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      let img = new Image()
      img.crossOrigin = 'Anonymous'
      img.onload = function() {
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        const result = canvas.toDataURL()
        cb(result)
        canvas = null
      }
      img.src = url
    }
  

• 将图片进行转换后，进行打包下载

    this.imgToBase64(imgItem.image_url, (dataURL) => {
      const formatUrl = dataURL.split(',')[1]
      zip.file(index.toString() + fileType, formatUrl, { base64: true })
      if (Object.keys(zip.files).length === this.viewImage.length) {
        zip.generateAsync({ type: 'blob' }).then((content) => {
          FileSave.saveAs(content, '素材图片.zip')
        });
      }
    })