toDataURL() very slow

I have a report with charts and tables. I am using the html2canvas with jsPDF to export this report to PDF file.

But the process is taking a long time, more than 11000ms.

See below the code I used:

html2canvas($('#first-page'), {
    onrendered: function(canvas) {
        firstPage = canvas.toDataURL('image/jpeg', 0.5);
    },
    background: '#ffffff'
});

I’m doing something wrong or really is a problem? How I can improve the performance?

EDIT: I discovered the problem isn’t toDataURL() method, but is the process to render the content onto the canvas, but, the problem continues.

[abhinavkumar985]

It is still slow in 2019, when extracting 5-6 html content into pdf with html2canvas.

[mohdrashidreact]

how can I make it fast in react in any idea.

function generatePdf() { toggleIspdfSaving(true); setTimeout(() => { try { const input = document.getElementById(“report-page”); html2canvas(input, { logging: true, letterRendering: 1, useCORS: true, windowWidth: 1920, windowHeight: 1080, allowTaint:true, }) .then((canvas) => { console.log(“testing … time”,canvas.height); const imgWidth = 270; const imgHeight = (canvas.height * imgWidth) / canvas.width; const imgData = canvas.toDataURL(“img/jpeg”,0.5); const pdf = new jsPDF(“p”, “px”, [202, imgHeight]); pdf.addImage(imgData, “PNG”, 0, 0, imgWidth, imgHeight,undefined,‘FAST’); // pdf.addImage(imgData, ‘PNG’, 0, 0, imgWidth, imgHeight); pdf.save( ${outputDetail?.name}-version-${outputDetail?.version}-report ); toggleIspdfSaving(false); dispatch( toastNotificationAction.initiateToastDisplay({ text: “Summary exported successfully”, toastType: “success”, }) ); }) .catch((error) => { console.log(“error in exporting summary”, error); toggleIspdfSaving(false); dispatch( toastNotificationAction.initiateToastDisplay({ text: “Unable to export summary”, toastType: “error”, }) ); }); } catch (err) { toggleIspdfSaving(false); dispatch( toastNotificationAction.initiateToastDisplay({ text: “Unable to export summary”, toastType: “error”, }) ); } }, 100); }