Chrome version 87 not supporting function canvas.toDataURL("image/png") of HTML2CANVAS when creating snapshot

Question

HTML2Canvas compatibility issue with Chrome version 87.xxxx. I am using HTML2Canvas to convert the HTML to PDF in my js project. It was working perfectly with Chrome version 86.0.xxxx. The issue I noticed is, the rendered text on the canvas partially appeared when making snapshot using snapShotURL = canvas.toDataURL("image/png") and generating pdf with this snapshot in latest version of Chrome (87.0.4280.88) and Opera (version 72.0.3815.400.). Not able to show complete line of input text by wrapping it. So the value in the Input field (textbox) in HTML is not getting reflected into the generated PDF. Long line of input text must be wrapped and should appear entire line of text in generated pdf.

I am using latest html2canvas.js, version tested with: 1.0.0-rc.7.

Any quick suggestions/support is highly appreciated.

Below is the code snippet I'm using for this process.

    var totalTime = getTotalTimeSpent();
    sessionStorage.setItem("bsView","H");
html2canvas(document.querySelector("#pageWrap")).then(canvas => {
            snapShotURL = canvas.toDataURL("image/png"); //get's image string
            sessionStorage.setItem("snapShotURLS", snapShotURL);  
});

Answer 1

i was facing the similar issue but couldn't find anything related to it after trying over and over again i finally solved the issue. I upgraded to latest html2canvas library (html2canvas 1.0.0-rc.7 https://html2canvas.hertzen.com ) and it worked. Note: latest library doesn't support html2canvas().then(function(canvas) {}) try to use

html2canvas($("#pageWrap")[0], {
    onrendered: function (canvas) {

    }
});

Answer 2

The current version 1.3.2 at html2canvas shows a usage of:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});