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>