我有一个包含一堆文件夹的 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 ) 创建对文件的引用，然后<img id="output" src="blob:null/341e9aeb-a794-4033-87f5-e8d075e9868a">为 zip 中的每个图像进行渲染。
如何从 zip 中获取图像？
谢谢！
您可以使用.async("base64")返回base64图像文件的表示；前置where is ; data:[<mediatype>][;base64],_ 设置为字符串。contentcontent<data>img srcdata 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);
});