I am trying to convert svg into canvas using canvg and save the converted canvas as png on my computer. Here is the code I am using -
function downloadImage()
{
saveImage('chart1');
saveImage('chart2');
saveImage('chart3');
saveImage('chart4');
saveImage('chart5');
saveImage('chart6');
saveImage('chart7');
saveImage('chart8');
}
function saveImage(chartId)
{
var $container = $('#'+chartId),
content = $container.html().trim();
var canvas1 = document.createElement('canvas');
var w=1366,h=768;
canvas1.id = "canvas1";
canvas1.width = w;
canvas1.height = h;
document.getElementById('pngcon').appendChild(canvas1);
var canvas = document.getElementById('canvas1');
canvg(canvas, content);
var theImage = canvas.toDataURL('image/png');
var a = document.createElement("a");
a.id="imagepng"
a.download = fileName+chartId+".png";
a.href = theImage;
document.body.appendChild(a);
document.getElementById("imagepng").click();
$("#pngcon").html('');
$("#imagepng").remove();
}
The above code works fine and downloads all the svgs as png images but as you can see there is point of calling the saveImage() method with almost same statement 8 times. So i tried doing this using loop like -
function downloadImage()
{
for(i=1;i<=8;i++)
{
saveImage('chart'+i);
}
}
But this time one of the svg is missed out. I don't have any clue about what is happening here. Pls help...