Here is my code of generating a image on chrome, firefox and other browsers. When i click on my function to generate a image in firefox, the browser holds the request and after sometime it prints some outputs without downloading the image
var node = document.querySelector("#pop-up-table");
html2canvas(node, {}).then(function(canvas){
var userAgent = navigator.userAgent;
var a = document.createElement('a');
if(userAgent.search('Chrome') >= 0){
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.download = 'table.png';
} else {
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'table.jpg';
}
a.click();
});
I modified the code slightly for firefox (will generate jpg for firefox and other browsers) other than chrome because of a claim on a comment in this post (here)
Console Output
16df332f834 0ms Starting document clone html2canvas.min.js:20:84099
16df332f834 3798ms Document cloned, using computed rendering html2canvas.min.js:20:84099
16df332f834 3799ms Starting DOM parsing html2canvas.min.js:20:84099
16df332f834 10556ms Starting renderer html2canvas.min.js:20:84099
16df332f834 10557ms Canvas renderer initialized
(770x1184 at 197,96.60000610351562)with scale 1 html2canvas.min.js:20:84099
16df332f834 27498ms Finished rendering html2canvas.min.js:20:84099
Have seen these solutions below but it didn't bring any good:
- https://github.com/niklasvh/html2canvas/issues/491
- https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221
- Cant draw the contents of a div onto a canvas using Html2Canvas without a timeout
NB: I call this code snippet in a setTimeout() function and increasing time didn't help
