Показать изображение из локального zip с помощью JSZip

У меня есть zip с кучей папок, содержащих один или несколько png-файлов, каждый из которых я хочу отобразить в DOM.

zip.loadAsync(file) .then(function(zip) {
  zip.file('textfile.txt')
   .async("string")
   .then(function (content) { console.log(content); });

}, function (e) {
     console.log("Error reading " + file.name + " : " + e.message); });

Я могу читать текстовый файл, но я застрял, когда дело доходит до получения двоичных данных из файла изображения.

Я думаю, что я должен использовать URL.createObjectURL(blob) для создания ссылки на файлы, а затем отображать <img id="output" src="blob:null/341e9aeb-a794-4033-87f5-e8d075e9868a"> для каждого изображения в почтовом индексе.

Как я могу получить изображения из почтового индекса?

Спасибо!


javascript blob jszip
person mottosson    schedule 13.10.2016    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Вы можете использовать .async("base64"), чтобы вернуть base64 представление файла изображения; добавьте data:[<mediatype>][;base64], к content, где content равно <data>; установите img src в строку data URI.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

<head>
  <script>
    window.onload = function() {
      var zip = new JSZip();

      function loadImage(url) {
        var request = new XMLHttpRequest();
        request.open("GET", url);
        request.responseType = "blob";
        request.onload = function() {
          console.log(this.response);
          var response = this.response;
          var filename = "image." + response.type.split("/")[1];
          zip.file(filename, response);
          zip.file(filename)
            .async("base64")
            .then(function(content) {
                console.log(content);
                var img = new Image;
                img.onload = function() {
                  document.body.appendChild(this)
                }
                img.src = "data:" + response.type + ";base64," + content;
              },
              function(e) {
                console.log("Error reading " 
                            + file.name + " : " 
                            + e.message);
              });
          
        }
        request.send()
      }

      loadImage("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150")
    }
  </script>
</head>

<body>
</body>

Альтернативно, используя .async("arraybuffer"), Blob(), Uint8Array(), URL.createObjectURL()

zip.file(filename)
  .async("arraybuffer")
  .then(function(content) {
      console.log(content);
      var buffer = new Uint8Array(content);
      var blob = new Blob([buffer.buffer]);
      console.log(blob);
      var img = new Image;
      img.onload = function() {
        document.body.appendChild(this)
      }
      img.src = URL.createObjectURL(blob);
    },
    function(e) {
      console.log("Error reading " + file.name + " : " + e.message);
    });

plnkr http://plnkr.co/edit/WURdaAqog3KTyBs4Kirj?p=preview

person guest271314    schedule 13.10.2016
comment
@mottosson Создание Blob из data URI описано в stackoverflow.com/questions/4998908/ - person guest271314; 13.10.2016
comment
Не уверен, что понимаю... Вы получаете представление с помощью XMLHttpRequest. Это похоже на получение его из почтового индекса? - person mottosson; 14.10.2016
comment
@mottosson Получение изображения с использованием XMLHttpRequest было сделано для демонстрации. У вас уже есть изображения в zip-архиве. Суть ответа заключается в том, чтобы использовать .async("base64") для получения файла в виде строки base64, затем добавить необходимый протокол data:, тип MIME и base64 для создания data URI. В качестве альтернативы вы можете создать Blob из base64 - person guest271314; 14.10.2016
comment
Вы также можете использовать .async("arraybuffer"), затем создать Blob и использовать Blob URL в img src. - person guest271314; 14.10.2016
comment
@mottosson Смотрите обновленный пост. Включенный подход с использованием .async("arraybuffer"), Blob(), URL.createObjectURL() - person guest271314; 14.10.2016