使用JSZip显示来自本地zip的图像

Question

使用JSZip显示来自本地zip的图像

我有一个带有一堆文件夹的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); });

Run Code Online (Sandbox Code Playgroud)

我可以读取文本文件，但是从图像文件中获取二进制数据时，我会遇到麻烦。

我的想法是，我应该使用URL.createObjectURL（blob）创建对文件的引用，然后<img id="output" src="blob:null/341e9aeb-a794-4033-87f5-e8d075e9868a">为zip中的每个图像进行渲染。

如何从zip中获取图像？

谢谢！

Answer 1

gue*_*314 6

您可以.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>

Run Code Online (Sandbox Code Playgroud)

或者，使用.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);
    });

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	9 年，1 月前
查看次数：	1887 次
最近记录：	9 年，1 月前