使用JSZip从本地zip文件中显示图片

Question

使用JSZip从本地zip文件中显示图片

10

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

我该怎么从zip中获取这些图像？

谢谢！

- mottosson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- guest271314 · Accepted Answer

您可以使用.async("base64")来返回图像文件的base64表示形式；在content前面添加data:[<mediatype>][;base64],，其中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