前端批量打包下载图片

先引用jquery、jszip、FileSaver，然后封装下载方法：

一、引用
<script src="lib/jquery-3.4.0.min.js"></script>
<script src="lib/jszip.min.js"></script>
<script src="lib/FileSaver.min.js"></script>

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

        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, "images.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([{url:'imageUrl1',name:'图片1'},{url:'imageUrl2',name:'图片2'})]