toDataURL() very slow

[michelgefuni]

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.

[ashitvora-zz]

It's slow for me as well.
Any other alternative?

[michelgefuni]

Unfortunately I did not find any other solution, I had to use it with this delay. The solution I found was to use a css loader.

At least until I can optimize this time

[shigabievartem]

Try this code:

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

In my project this change help me)

[niklasvh]

You can try if canvas.toDataURL(); is faster as it won't need to do jpg compression.

[hackondor]

It's really slow -_-" .... any idea ?

[JoshuaDeanEssium]

umm... it would be faster to render a jpg than it would be to render a png and the default toDataURL() returns a png so it has a transparency layer... which takes longer

[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);
}

[catalinberta]

Use html-to-image instead of html2canvas. It reduced the image rendering by ~95% for me