Save/download multiple canvas from a single page

Question

I want to download multiple canvas created by html2canvas on a single page with 1 click. Downloading 1 canvas worked fine.

I have tried to create a loop within the function sendToCanvas , looping through each ID (as I do know the ID of each HTML element I am sending to canvas then to download) but it doesn't have the desired result.

I was expecting 4 files to download as jpeg, each named file_1, file_2, file_3 and file_4

I assume just looping each ID in the function isn't the way to go. I didn't write the original code I am trying to adapt it for my needs

 var button = document.getElementById('download'); button.addEventListener('click', sendToCanvas); function download( canvas, filename ) { // create an "off-screen" anchor tag const a = document.createElement('a'); // the key here is to set the download attribute of the a tag a.download = filename; // convert canvas content to data-uri for link. When download // attribute is set the content pointed to by link will be // pushed as "download" in HTML5 capable browsers a.href = canvas.toDataURL("image/jpeg;base64, 0.5"); a.style.display = 'none'; document.body.appendChild( a ); a.click(); document.body.removeChild( a ); } function sendToCanvas(event){ var toCanvas = ["#redBlock", "#blueBlock", "#greenBlock", "#yellowBlock"] for (let i = 0; i < toCanvas.length; i++) { const element = document.querySelector(toCanvas[i]); html2canvas(element, { scale: 1, useCORS: true, }) .then( ( canvas ) => { download( canvas, 'file_' + (i + 1) ); }); } }

 #redBlock { width:100px; height:100px; background-color:red; } #blueBlock { width:100px; height:100px; background-color:blue; } #greenBlock { width:100px; height:100px; background-color:green; } #yellowBlock { width:100px; height:100px; background-color:yellow; }

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <button id="download">Download</button> <section id="redBlock"> </section> <section id="blueBlock"> </section> <section id="greenBlock"> </section> <section id="yellowBlock"> </section>

Answer 1

You could use an async for loop, then maybe in your download function you can put all of your blocks in a zip file with a library like JSZip

 let canvasArr = []; var zip = new JSZip(); async function download(){ for (const canvas of canvasArr) { index++; var data = canvas; var idx = data.indexOf('base64,') + 'base64,'.length; var content = data.substring(idx); zip.file('myFile' + index + '.extension', content, { base64: true }); } zip.generateAsync({ type: 'blob' }).then((data: any) => { saveAs(data, `downloadFile.zip`); }); } async function sendToCanvas(event){ var toCanvas = ["#redBlock", "#blueBlock", "#greenBlock", "#yellowBlock"] for await (let i = 0; i < toCanvas.length; i++) { const element = document.querySelector(toCanvas[i]); const canvas = await html2canvas(element, { scale: 1, useCORS: true, }); canvasArr.push(canvas); } await download(); }

However i think this is not the most optimal way solve this.

See: https://github.com/niklasvh/html2canvas/issues/1413

Jszip -> https://stuk.github.io/jszip/

for await...of -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of