前端下载图片压缩包

一、 下载插件 jszip file-saver

npm i jszip file-saver

二、获取图片对应的base64数据

1. 图片转成base64通过canvas.toDataURL()实现

2. 需要将canvas的宽高设置成图片宽高，避免图片截取不全或者失真等问题

3. 图片资源存在跨域问题，设置crossOrigin不起作用的话，需要对资源进行配置

  getImage(url) {
            return new Promise((resolve, reject) => {
                let img = new Image()
                img.setAttribute('crossOrigin', 'anonymous')
                img.src = url
                img.onload = () => {
                    let canvas = document.createElement('canvas')
                    let ctx = canvas.getContext('2d')
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
                    let pattern = ctx.createPattern(img, 'no-repeat')
                    ctx.fillStyle = pattern
                    let dataURL = canvas.toDataURL()
                    resolve(dataURL)
                }
            })
        },

三、打包

  downImage(arr) {
            let urls = arr.map(v => v.url)
            const zip = new JSZip()
            const promises = []
            urls.forEach(item => {
                const promise = this.getImage(item).then(data => {
                    let arrName = item.split('/')
                    let fileName = arrName[arrName.length - 1] // 获取文件名
                   // 逐个添加文件
                    let imgArr = data.split(',')
                    zip.file(fileName, imgArr[1], { base64: true }) // 根据base64数据在压缩包中生成jpg数据
                })
                promises.push(promise)
            })
            Promise.all(promises).then(() => {
                zip.generateAsync({ type: 'blob' }).then(content => {
                    // 生成二进制流
                    FileSaver.saveAs(content, 'image.zip') // 利用file-saver保存文件  自定义文件名
                })
            })
        },