前端打包下载多个图片（ZIP格式）

前期准备

1. js库，包括jquery、jszip、FileSaver这三个，可以从网上下载到本地引入，或者直接引用网上的，我这里使用的是后者（以下没有包含jquery，因为本地有）。

2. 通用打包方法

var FunLib = {
            // 图片打包下载
            download: function (images, downloadName) {
                FunLib.packageImages(images, downloadName)
            },
            // 打包压缩图片
            packageImages: function (imgs, downloadName) {
                var imgBase64 = []
                var imageSuffix = [] // 图片后缀
                var zip = new JSZip()
                var img = zip.folder(downloadName)

                for (var i = 0; i < imgs.length; i++) {
                    var src = imgs[i].url
                    var suffix = src.substring(src.lastIndexOf("."))
                    imageSuffix.push(suffix)
                    FunLib.getBase64(imgs[i].url).then(function (base64) {
                        imgBase64.push(base64.substring(22))
                        if (imgs.length === imgBase64.length) {
                            for (var i = 0; i < imgs.length; i++) {
                                img.file(imgs[i].name + imageSuffix[i], imgBase64[i], {base64: true})
                            }
                            zip.generateAsync({type: "blob"}).then(function (content) {
                                saveAs(content, downloadName+".zip");
                            })
                        }
                    }, function (err) {
                        console.log(err)
                    })
                }
            },
            // 传入图片路径，返回base64
            getBase64: function (img) {
                var image = new Image()
                image.crossOrigin = 'Anonymous'
                image.src = img
                var deferred = $.Deferred()
                if (img) {
                    image.onload = function () {
                        var canvas = document.createElement("canvas")
                        canvas.width = image.width
                        canvas.height = image.height
                        var ctx = canvas.getContext("2d")
                        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
                        var dataURL = canvas.toDataURL()
                        deferred.resolve(dataURL)
                    }
                    return deferred.promise()
                }
            }
        }

---

应用

主要使用方法FunLib.download(imgArr, downloadName)，上面的方法是两个参数，第一个参数imgArr是图片源（JSon数组格式），第二个参数是下载的文件名同时也是解压出的文件夹名，实际也可以按需求把下载文件名和解压缩文件夹名分开，传入三个参数。示例如下：

function batchDownload(){
    var rows = $("#tb").bootstrapTable('getData');
    var imgArr = [];
    if (rows.length < 1){
        return;
    }
    for (var i = 0; i < rows.length; i++) {
        imgArr.push({
            url: rows[i].url,
            name: rows[i].newfilename
        });
    }
    var downloadName = $('#XXX').html();
    FunLib.download(imgArr, downloadName);
    //参考格式
    /*FunLib.download([{url:'http://XXX.png',name:'name1'},
        {url:'http://XXX.png',name:'name2'}], '图片打包');*/
}