js realisiert das Verpacken mehrerer Bilder in 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 herunterladen</button><span id="status"></span>

Funktion PaketBilder() {
    $('#status').text('Wird verarbeitet...')

    var imgsSrc = []

    // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
    // upload/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg
    für (var i = 0; i < 1; i++) {
        imgsSrc.push('upload/2022/web/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg')
    }
    var imgBase64 = [] //Base64-Bild var imageSuffix = [] //Bildsuffix var zip = new JSZip()
    zip.file('readme.txt', 'Falldetails\n')
    var img = zip.folder('Bilder')

    für (var i = 0; i < imgsSrc.length; i++) {
        var Suffix = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.'))
        imageSuffix.push(Suffix)

        getBase64(imgsSrc[i]).dann(
            Funktion (Base64) {
                Konsole.log (base64)
                imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
                // Wenn alle Bilder in Base64 konvertiert sind, führen Sie eine Bildkomprimierung durch, wenn (imgsSrc.length == imgBase64.length) {
                    für (var i = 0; i < imgsSrc.length; i++) {
                        // Dateiname data img.file(i + imageSuffix[i], imgBase64[i], {
                            base64: wahr,
                        })
                    }
                    zip.generateAsync({
                        Typ: "Blob"
                    }).dann(Funktion (Inhalt) {
                        console.log(1)
                        // siehe FileSaver.js
                        speichernUnter(Inhalt, 'bilder.zip')
                        $('#status').text('Verarbeitung abgeschlossen...')
                    })
                }
            },
            Funktion (Fehler) {
                console.log(err) //Ausnahmeinformationen drucken}
        )
    }
}

// Übergeben Sie den Bildpfad und geben Sie base64 zurück
Funktion getBase64(img) {
    Funktion getBase64Image(img, Breite, Höhe) {
        //Wenn Sie Breite und Höhe aufrufen, übergeben Sie bestimmte Pixelwerte, um die Größe zu steuern. Wenn nicht übergeben, wird die Standardbildgröße verwendet var canvas = document.createElement('canvas')
        canvas.width = Breite? Breite : img.width
        canvas.height = Höhe? Höhe: Bildhöhe

        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, Leinwandbreite, Leinwandhöhe)
        var dataURL = canvas.toDataURL()
        Daten-URL zurückgeben
    }
    var image = neues Image()
    image.crossOrigin = "Anonym"
    bild.src = img
    var aufgeschoben = $.Aufgeschoben()
    wenn (img) {
        bild.onload = Funktion () {
            deferred.resolve(getBase64Image(image)) // übergebe base64 an done für die Upload-Verarbeitung}
        return deferred.promise() //Das Problem besteht darin, sessionStorage['imgTest'] zurückzugeben, nachdem onload abgeschlossen ist
    }
}

Funktion PaketBilder() {
    $('#status').text('Wird verarbeitet...')

    var imgsSrc = []

    // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
    // upload/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg
    für (var i = 0; i < 1; i++) {
        imgsSrc.push('upload/2022/web/u=2496571732,442429806&fm=26&gp=0.jpg')
    }
    var imgBase64 = [] //Base64-Bild var imageSuffix = [] //Bildsuffix var zip = new JSZip()
    zip.file('readme.txt', 'Falldetails\n')
    var img = zip.folder('Bilder')

    für (var i = 0; i < imgsSrc.length; i++) {
        var Suffix = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.'))
        imageSuffix.push(Suffix)

        getBase64(imgsSrc[i], Funktion (base64) {
            imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
            wenn (imgsSrc.length == imgBase64.length) {
                für (var i = 0; i < imgsSrc.length; i++) {
                    // Dateiname data img.file(i + imageSuffix[i], imgBase64[i], {
                        base64: wahr,
                    })
                }
                zip.generateAsync({
                    Typ: "Blob"
                }).dann(Funktion (Inhalt) {
                    console.log(1)
                    // siehe FileSaver.js
                    speichernUnter(Inhalt, 'bilder.zip')
                    $('#status').text('Verarbeitung abgeschlossen...')
                })
            }
        })
    }
}
Funktion getBase64(img, Rückruf) {
    holen(img).dann(
        res => res.blob())
        .then(res => {
            let fr = neuer FileReader(); //https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
            fr.onload = Funktion (e) {
                Rückruf(e.Ziel.Ergebnis)
            };
            fr.onerror = Funktion () {
                console.log('Lesefehler!')
            };
            fr.readAsDataURL(res); //Wenn es sich um eine Textkonvertierung handelt, kann der zweite Parameter die Kodierung verwenden})
}

Funktion PaketBilder() {
    $('#status').text('Wird verarbeitet...')

    var imgsSrc = []

    // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
    // upload/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg
    für (var i = 0; i < 100; i++) {
        imgsSrc.push('upload/2022/web/u=2496571732,442429806&fm=26&gp=0.jpg')
    }

    BatchDownload-Handle (imgsSrc)
}



getFile = (URL) => {
    returniere neues Promise((lösen, ablehnen) => {
        axios({
            Methode: 'get',
            URL (URL = URL = URL),
            Antworttyp: "Array-Puffer"
        }).dann(Daten => {
            auflösen(Daten.Daten)
        }).fangen(Fehler => {
            ablehnen(Fehler.toString())
        })
    })
};

// Batch-Download handleBatchDownload = async (selectImgList) => {
    const data = selectImgList;
    const zip = neues JSZip()
    const verspricht = []
    warte auf data.forEach((item, idx) => {
        // konsole.log(Element, idx)
        const promise = this.getFile(item).then(async (data) => { // Lade die Datei herunter und speichere sie als ArrayBuffer-Objekt const arr_name = item.split("/");
            let file_name = arr_name[arr_name.length - 1] // Dateinamen abrufen // if (file_name.indexOf('.png') == -1) {
            // Dateiname = Dateiname + '.png'
            // }
            warte auf zip.file(idx + '.png', data, {
                binär: wahr
            }) // Dateien einzeln hinzufügen })
        Versprechen.Push(Versprechen)
    })
    Versprechen.alle(Versprechen).dann(() => {
        zip.generateAsync({
            Typ: "Blob"
        }).then(content => { // Binärstream generieren saveAs(content, "photo.zip") // Dateispeicher verwenden, um die Datei zu speichern $('#status').text('Verarbeitung abgeschlossen…')
        })
    })

};