vue批量打包下载图片

主要用到 jszip 和 file-saver

npm install jszip --save
npm install file-saver --save

js部分

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

methods: {
    downImg() {
        var blogTitle = '打包图片';
        var zip = new JSZip();
        var imgs = zip.folder(blogTitle);
        var baseList = [];
        // 要下载图片的url
        var arr = ['./img1.png', './img2.png', './img3.png'];
        // 下载后图片的文件名，个数应与arr对应
        var imgNameList = ['图片1', '图片2', '图片3'];

        for (var i = 0; i < arr.length; i++) {
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous');
            
            image.onload = function () {
                let canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                
                let context = canvas.getContext('2d');
                context.drawImage(image, 0, 0, image.width, image.height);
                
                let url = canvas.toDataURL(); // 得到图片的base64编码数据
                canvas.toDataURL('image/png');
                
                baseList.push(url.substring(22));    // 去掉base64编码前的 data:image/png;base64,
                if (baseList.length === arr.length && baseList.length > 0) {
                    for (let k = 0; k < baseList.length; k++) {
                        imgs.file(imgNameList[k] + '.png', baseList[k], {base64: true})
                    }
                    zip.generateAsync({type: 'blob'}).then(function (content) {
                        // see FileSaver.js
                        FileSaver.saveAs(content, blogTitle + '.zip');
                    });
                }

            };
            image.src = arr[i];
        }
    }
}

如果图片与代码不在同一服务器，会出现跨域问题，这时需要服务器允许跨域，以阿里云为例，配置如下：（其他PHP/JAVA服务器同理）