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

Question

I have many canvas on my page. I want to save them all to 1 .zip file (using JSZIP) on button click. I tried everything but it doesn't work :C. What am I missing?

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

You are overwriting the native method saveAs with your function saveAs .

For completeness here's the code that works for me:

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");
  });
})