js は複数の画像を zip にパッケージ化します

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

<button onclick="packageImages()">zip をダウンロード</button><span id="status"></span>

関数packageImages() {
    $('#status').text('処理中...')

    var imgsSrc = []

    // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
    //アップロード/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg
    (var i = 0; i < 1; i++) の場合 {
        画像アップロード
    }
    var imgBase64 = [] //base64 画像 var imageSuffix = [] //画像サフィックス var zip = new JSZip()
    zip.file('readme.txt', 'ケースの詳細\n')
    var img = zip.folder('画像')

    (var i = 0; i < imgsSrc.length; i++) {
        var サフィックス = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.'))
        imageSuffix.push(サフィックス)

        getBase64(imgsSrc[i]).then(
            関数 (base64) {
                コンソール.log(base64)
                imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
                // すべての画像がbase64に変換されたら、画像圧縮を実行します。if (imgsSrc.length == imgBase64.length) {
                    (var i = 0; i < imgsSrc.length; i++) {
                        // ファイル名データ img.file(i + imageSuffix[i], imgBase64[i], {
                            base64: 真、
                        })
                    }
                    zip.generateAsync({
                        タイプ: 'blob'
                    }).then(関数(コンテンツ) {
                        コンソール.log(1)
                        // FileSaver.js を参照
                        saveAs(コンテンツ、'images.zip')
                        $('#status').text('処理が完了しました...')
                    })
                }
            },
            関数 (エラー) {
                console.log(err) //例外情報を出力します}
        ）
    }
}

// 画像パスを渡し、base64 を返す
関数 getBase64(img) {
    関数 getBase64Image(画像, 幅, 高さ) {
        //幅と高さを呼び出すときは、サイズを制御するために特定のピクセル値を渡します。渡されない場合は、デフォルトの画像サイズが使用されます var canvas = document.createElement('canvas')
        canvas.width = 幅 ? 幅 : img.width
        canvas.height = height ? height : img.height

        var ctx = キャンバス.getContext('2d')
        ctx.drawImage(画像, 0, 0, キャンバス.幅, キャンバス.高さ)
        var dataURL = canvas.toDataURL()
        データURLを返す
    }
    var image = 新しい画像()
    image.crossOrigin = '匿名'
    画像.src = 画像
    var 延期 = $.Deferred()
    もし（画像）{
        image.onload = 関数（）{
            deferred.resolve(getBase64Image(image)) // アップロード処理のために base64 を done に渡す}
        return deferred.promise() //問題は、onloadが完了した後にsessionStorage['imgTest']を返すことです
    }
}

関数packageImages() {
    $('#status').text('処理中...')

    var imgsSrc = []

    // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
    //アップロード/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg
    (var i = 0; i < 1; i++) の場合 {
        画像アップロード
    }
    var imgBase64 = [] //base64 画像 var imageSuffix = [] //画像サフィックス var zip = new JSZip()
    zip.file('readme.txt', 'ケースの詳細\n')
    var img = zip.folder('画像')

    (var i = 0; i < imgsSrc.length; i++) {
        var サフィックス = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.'))
        imageSuffix.push(サフィックス)

        getBase64(imgsSrc[i], 関数(base64) {
            imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
            imgsSrc.length == imgBase64.length の場合 {
                (var i = 0; i < imgsSrc.length; i++) {
                    // ファイル名データ img.file(i + imageSuffix[i], imgBase64[i], {
                        base64: 真、
                    })
                }
                zip.generateAsync({
                    タイプ: 'blob'
                }).then(関数(コンテンツ) {
                    コンソール.log(1)
                    // FileSaver.js を参照
                    saveAs(コンテンツ、'images.zip')
                    $('#status').text('処理が完了しました...')
                })
            }
        })
    }
}
関数 getBase64(img, コールバック) {
    fetch(画像).then(
        res => res.blob())
        .then(res => {
            fr = new FileReader(); //https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
            fr.onload = 関数 (e) {
                コールバック(e.target.result)
            };
            fr.onerror = 関数（）{
                console.log('読み取りエラー!')
            };
            fr.readAsDataURL(res); //テキスト変換の場合、2番目のパラメータはエンコードを使用できます})
}

関数packageImages() {
    $('#status').text('処理中...')

    var imgsSrc = []

    // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
    //アップロード/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg
    (var i = 0; i < 100; i++) の場合 {
        画像アップロード
    }

    ハンドルバッチダウンロード(imgsSrc)
}



getFile = (url) => {
    新しい Promise を返します ((resolve, reject) => {
        アクシオス({
            メソッド: 'get'、
            URL、
            レスポンスタイプ: 'arraybuffer'
        }）。次に、データ => {
            解決(データ.データ)
        }).catch(エラー => {
            拒否(error.toString())
        })
    })
};

// バッチダウンロード handleBatchDownload = async (selectImgList) => {
    const データ = selectImgList;
    const zip = 新しい JSZip()
    const プロミス = []
    data.forEach((item, idx) => {を待つ
        // コンソール.log(アイテム、idx)
        const promise = this.getFile(item).then(async (data) => { // ファイルをダウンロードし、ArrayBuffer オブジェクトとして保存します。const arr_name = item.split("/");
            let file_name = arr_name[arr_name.length - 1] // ファイル名を取得する // if (file_name.indexOf('.png') == -1) {
            // ファイル名 = ファイル名 + '.png'
            // }
            zip.file(idx + '.png', データ, {を待つ
                バイナリ: true
            }) // ファイルを一つずつ追加します })
        promises.push(プロミス)
    })
    Promise.all(promises).then(() => {
        zip.generateAsync({
            タイプ: "blob"
        }).then(content => { // バイナリ ストリームを生成 saveAs(content, "photo.zip") // ファイル セーバーを使用してファイルを保存します $('#status').text('処理が完了しました....')
        })
    })

};