前端批量打包下載圖片

先引用jquery、jszip、FileSaver，而後封裝下載方法：

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

2、方法封裝
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()
        }
    }
}

3、方法調用

FunLib.download([{url:'imageUrl1',name:'圖片1'},{url:'imageUrl2',name:'圖片2'})]