JSZIP -多画布保存到一个.zip文件

Question

我的页面上有很多画布。我想把它们都保存到1 .zip文件(使用JSZIP)的按钮单击。我什么都试过了，但都不行。我错过了什么?

async function blobCalc(file) {
const blob = await new Promise(res => file.toBlob(res));
return blob;
}
async function genBlob(canvases) {
const blob = await Promise.all(
[...canvases].map(async(element)=>{
return await blobCalc(element);
})
);
return blob;
}
async function saveAs(){
const canvas = document.querySelectorAll("canvas");
let blobs = await genBlob(canvas);
const zip = new JSZip();
for(let i = 0;  i < blobs.length;i++){
zip.file("canvas"+ i +".png", blobs[i], {base64: true});
}
return zip;
}
async function save(){
await saveAs().then( async (res) => {
await res.generateAsync({ type: "blob" }).then(function(content){
saveAs(content, "test.zip"); });
})
}
const btnGenerate = document.getElementById("form-btn");
btnGenerate.addEventListener('click', save);

Answer 1

您正在用您的函数saveAs覆盖本机方法saveAs。

为完整起见，下面是我的代码:

var canvas = document.getElementById("my-canvas");
const zip = new JSZip();
canvas.toBlob(function(data) {
zip.file("file.png", data);
zip.file("file.txt", "another file");
zip.generateAsync({
type: "blob"
}).then(function(content) {
saveAs(content, "test.zip");
});
})