Как извлечь фотографию из zip архива и отобразить на сайте?

Question

[Арсений Соколовский]

Есть zip архив с фотографией, и нужно с помощью JSZip на сайте извлечь фотографию и отобразить ее на сайте. Вот есть код:

<input type=file id=f>
    <img id=pop src="" alt="">
    <script>
        f.onchange = function () {
            var zip = new JSZip();
            zip.loadAsync(this.files[0] /* = file blob */ )
                .then(function (zip) {
                    // process ZIP file content here
                    alert("OK")
                console.log(zip)
                }, function () {
                    alert("Not a valid zip file")
                });
        };
    </script>

И в параметре zip следующие данные:

Как мне поместить фотографию из zip в src картинки?

Answer 1

[Alexandroppolus]

Внутри zip есть метод forEach, почти такой же как у массива.
zip.forEach обходит все файлы внутри архива, см. пример тут: https://stuk.github.io/jszip/documentation/example...
(в колбэке для forEach второй параметр - zipEntry, работаем с ним)

обходя файлы, при обнаружении картинки, её надо прочитать как блоб, этот блоб превратить в url, который передать в картинку. По идее, в архиве может оказаться более одной картинки - тут либо выставляешь флажок о том, что картинка уже найдена и далее с картинками не возишься, либо каждую картинку рисуешь отдельно. Это неважно. Суть вот в чем:

// если в zipEntry - картинка
zipEntry.async('blob').then((blob) => {
    const url = URL.createObjectURL(blob); // создаем "урл" для блоба
    img.src = url; // ставим в картинку
    setTimeout(() => {
        URL.revokeObjectURL(url); // удаляем, чтобы не было утечек памяти
    }, 100);
})

https://developer.mozilla.org/ru/docs/Web/API/URL/...

Comments

[Арсений Соколовский]

Огромное спасибо вам! Все получилось)

[Арсений Соколовский]

А не могли бы вы еще подсказать как загрузить зип из ссылки? Просто если я вместо

this.files[0]

вставляю ссылку на зип, то в ответ вижу Valid zip file.
Вот как я сделал

function loadZip(src) {
            var zip = new JSZip();
            zip.loadAsync(/*this.files[0]*/src /* = file blob */ )
                .then(function (zip) {
                    // process ZIP file content here
                    alert("OK")
                    console.log(zip)
                    var keys = Object.keys(zip.files)
                    for(var i = 0; i < keys.length; i++){
                        if( zip.files[keys[i]].name.includes('.png')){
                            zip.files[keys[i]].async('blob').then((blob) => {
                        const url = URL.createObjectURL(blob); // создаем "урл" для блоба
                        var newImg = document.createElement('img');
                        newImg.style.width = 100 + 'px';
                        newImg.style.height = 100 + 'px';
                        document.body.append(newImg)
                        newImg.src = url; // ставим в картинку
                        setTimeout(() => {
                            URL.revokeObjectURL(url); // удаляем, чтобы не было утечек памяти
                        }, 100);
                    })
                        }
              
                    }
                  
                }, function () {
                    alert("Not a valid zip file")
                });
        };

[Alexandroppolus]

Арсений Соколовский, загрузить ЗИП как блоб с помощью fetch, далее всё то же самое. Блоб - основа всего, краеугольный камень)

[Арсений Соколовский]

Alexandroppolus, Uncaught TypeError: response.blob is not a function
at :1:10

function loadZip(src) {
            let response =  fetch(src);
            var zip = new JSZip();
            let blob = response.blob();
            zip.loadAsync(/*this.files[0]*/blob /* = file blob */ )
                .then(function (zip) {
                    // process ZIP file content here
                    alert("OK")
                    console.log(zip)
                    var keys = Object.keys(zip.files)
                    for(var i = 0; i < keys.length; i++){
                        if( zip.files[keys[i]].name.includes('.png')){
                            zip.files[keys[i]].async('blob').then((blob) => {
                        const url = URL.createObjectURL(blob); // создаем "урл" для блоба
                        var newImg = document.createElement('img');
                        newImg.style.width = 100 + 'px';
                        newImg.style.height = 100 + 'px';
                        document.body.append(newImg)
                        newImg.src = url; // ставим в картинку
                        setTimeout(() => {
                            URL.revokeObjectURL(url); // удаляем, чтобы не было утечек памяти
                        }, 100);
                    })
                        }
              
                    }
                  
                }, function () {
                    alert("Not a valid zip file")
                });
        };
    </script>

[Alexandroppolus]

Арсений Соколовский,

примерно так

function loadZip(src) {
    fetch(src).then(response => response.blob()).then(blobZip => {
        var zip = new JSZip();
        zip.loadAsync(blobZip)
            .then(function (zip) {
                // process ZIP file content here
                alert("OK")
                console.log(zip)
                var keys = Object.keys(zip.files)
                for(var i = 0; i < keys.length; i++){
                    if( zip.files[keys[i]].name.includes('.png')){
                        zip.files[keys[i]].async('blob').then((blob) => {
                            const url = URL.createObjectURL(blob); // создаем "урл" для блоба
                            var newImg = document.createElement('img');
                            newImg.style.width = 100 + 'px';
                            newImg.style.height = 100 + 'px';
                            document.body.append(newImg)
                            newImg.src = url; // ставим в картинку
                            setTimeout(() => {
                                URL.revokeObjectURL(url); // удаляем, чтобы не было утечек памяти
                            }, 100);
                        })
                    }

                }

            }, function () {
                alert("Not a valid zip file")
            });
    });
};

https://learn.javascript.ru/fetch

[Арсений Соколовский]

Alexandroppolus, снова огромное спасибо вам!