Html2canvas: 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]

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.