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

Есть 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 следующие данные:
unknown.png?width=1440&height=391
Как мне поместить фотографию из zip в src картинки?
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
Alexandroppolus
@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/...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы