使用JSZip

时间:2016-10-13 18:39:51

标签: javascript blob 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)来创建对文件的引用,然后为zip中的每个图像呈现<img id="output" src="blob:null/341e9aeb-a794-4033-87f5-e8d075e9868a">

如何从zip中获取图像?

谢谢!

1 个答案:

答案 0 :(得分:4)

您可以使用.async("base64")返回图像文件的VSS.require(["VSS/Controls", "VSS/Controls/Grids","VSS/Controls/Dialogs", "VSS/Service", "TFS/DistributedTask/TaskAgentRestClient"], function (Controls, Grids, Dialogs, VSS_Service, RestClient) { var client = RestClient.getClient(); client.getAgentPools().then(function(agentPools) { jQuery.each(agentPools,function(index, agentPool) { $("#agentBody").append("<td>"+agentPool.properties.name+"</td>"); }) }).catch(console.log.bind(console)); VSS.notifyLoadSucceeded(); }); 表示形式;将base64添加到data:[<mediatype>][;base64],,其中contentcontent;将<data> img设置为data URI字符串。

&#13;
&#13;
src
&#13;
&#13;
&#13;

或者,使用<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()

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