我有一个带有一堆文件夹的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中获取图像?
谢谢!
答案 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],
,其中content
为content
;将<data>
img
设置为data URI
字符串。
src
&#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()