Html2canvas: toDataURL() very slow

Created on 5 Jul 2017 · 7Comments · Source: niklasvh/html2canvas

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.

Source

michelgefuni

👍3

Most helpful comment

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

abhinavkumar985 on 19 Mar 2019

👍19 👀2

All 7 comments

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

ashitvora on 7 Jul 2017

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

michelgefuni on 7 Jul 2017

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)

shigabievartem on 20 Jul 2017

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

niklasvh on 27 Jul 2017

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

hackondor on 22 Aug 2017

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