怎么把在线的图片或是本地的图片批量打成压缩包?

1.在打包之前应确定在线的图片是否有跨域问题,不然将会打包失败
2.在线的图片链接应不带任何的参数(或是用字符串的方法保留不带参数的图片地址)
下面看代码:

<script src="./axios.js"></script> //引入axios
下面的2个在线js资源链接必须引入,不然无法打成压缩包
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.9.1/jszip.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
<script>
 let fileList = [
        { path: 'http://p1.music.126.net/Ihl-39vrs2qxdLyrI7p4Hg==/109951166653705403.jpg' },//图片地址数组,不带任何的参数
        { path: './ds4.png' }//本地图片
    ]

 let btn = document.querySelector('.btn')
 btn.addEventListener('click', function () {//点击按钮下载压缩包
 handleDownload()
    })

 function handleDownload() {
 const zip = new JSZip()//new 出一个压缩对象
 const cache = {}
 const promises = []
 fileList.forEach(item => {
 const promise = getFile(item.path).then(data => {
 let arr_name = item.path.split("/")
 const file_name = arr_name[arr_name.length - 1]
 zip.file(file_name, data, { binary: true })// file_name:图片名字  data:图片对象    
 cache.file_name = data
            })
 promises.push(promise)
        })
 Promise.all(promises).then(() => {
 zip.generateAsync({ type: 'blob' }).then(content => { //这里是处理成压缩包
 saveAs(content, '文件下载.zip') // 利用file-saver保存文件  自定义文件名
            })
        })
    }

 function getFile(url) { //url是图片的地址
 return new Promise((resolve, reject) => {
 axios({
 method: 'get',
 url,
 responseType: 'blob'
            }).then(data => {
 resolve(data.data)
            })
                .catch(error => {
 reject(error.toString())
                })
        })
    }