使用 JSZip 显示本地 zip 中的图像

Question

我有一个 zip，里面有一堆文件夹，每个文件夹都包含一个或多个我想渲染到 DOM 的 png 文件。

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 ) 创建对文件的引用，然后为 zip 中的每个图像渲染 <img id="output" src="blob:null/341e9aeb-a794-4033-87f5-e8d075e9868a">。

如何从 zip 文件中获取图像？

谢谢！

Answer 1

您可以使用 .async("base64") to return base64 representation of image file; prepend data:[<mediatype>][;base64], to content where content is <data>; set img src to 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);
    });

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

使用 JSZip 显示本地 zip 中的图像

Show image from local zip with JSZip

javascript

blob

jszip