vue 项目图片批量导出并压缩成zip

1、安装依赖并引入

  npm install jszip --save

  npm install file-saver --save

  import JSZip from 'jszip'
  import FileSaver from 'file-saver'
2、将远程或本地图片的url转换成base64,然后下载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
  *多个图片压缩成zip导出
  */
private downloadZip() {
  let that = this
  const zip = new JSZip()
  let arrs:any = [] // 这个数组只用于判断图片是否都转换成base64
  setTimeout(_ => {
    let arr = that.multipleSelections // 待转换的数据(包含图片的名和地址)
    arr.forEach((item:any) => {
      let fileName = item.orgName // 图片那么
      let url = ''
      // item.shareImg 是图片地址
      that.getBase64(item.shareImg, (dataURL:any) => {
        url = dataURL // 图片url转换成base64
        zip.file(fileName + '.png', url.substring(22), { base64: true })
        arrs.push(url)
        if (arrs.length === that.multipleSelections.length) { // 若要导出的图片全部转换为base64了,则开始导出
          zip.generateAsync({ type: 'blob' }).then(content => {
            FileSaver.saveAs(content, '二维码.zip')
          })
        }
      })
    })
  }, 0)
}
// 图片url转换成base64
private getBase64(url:string, callback:any) {
  var Img = new Image()
  var dataURL = ''
  Img.src = url + '?v=' + Math.random()
  Img.setAttribute('crossOrigin', 'Anonymous')
  Img.onload = function() {
    var canvas:any = document.createElement('canvas')
    var width = Img.width
    var height = Img.height
    canvas.width = width
    canvas.height = height
    canvas.getContext('2d').drawImage(Img, 0, 0, width, height)
    dataURL = canvas.toDataURL('image/jpeg')
    return callback ? callback(dataURL) : null
  }
}

 JSzip API地址:https://stuk.github.io/jszip/documentation/api_jszip/constructor.html

 

   
posted @   BlancheWang  阅读(919)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
点击右上角即可分享
微信分享提示