Hello
I want to convert div content in image.
I am using following code for that
function genScreenshot() {
html2canvas(document.getElementById('dvgrid'), {
onrendered: function(canvas) {
$('#box1').html("");
$('#box1').append(canvas);
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').attr('download','Test file.png');
$('#test')[0].click();
}
}
});
}
<div id="dvMap" style="width: 900px; height: 500px; overflow: auto;">
</div>
<div id="box1">
</div>
<input type="button" id="btnPrint" value="Print" onclick="genScreenshot();" />
But problem is,it display only route while convert it into image and save as image only contain route.
While converting div into image it will not convert while div but display only route in the image.
Please refer following image for that.
https://ibb.co/bSZ4xx
Anyone have any idea about it why it is happen?
Please Suggest!!