toDataURL() very slow

Question

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.
I've tried to change the format, the quality, but nothing worked.

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?

Have you verified that is it actually this step that takes so much time? I’d imagine that rendering your content _onto_ the canvas is gonna take a good amount of time as well ... — CBroe, Jul 05 '17 at 14:13
@CBroe I did not think about this step, of rendering the html inside the canvas. How can I measure this time? — Michel Makei Gefuni, Jul 05 '17 at 14:33
https://stackoverflow.com/questions/313893/how-to-measure-time-taken-by-a-function-to-execute — CBroe, Jul 05 '17 at 14:35
@CBroe You're right, I just measured the time that toDataURL() took, and it was only 28.19482421875ms — Michel Makei Gefuni, Jul 05 '17 at 14:38
Maybe the problem be the plugin html2canvas, in the step render the content onto the canvas — Michel Makei Gefuni, Jul 05 '17 at 14:41

score 5 · Accepted Answer · answered Jul 05 '17 at 14:41

5

You don't need to use toDataUrl.http://jsfiddle.net/davidmather/sxp0meer/3/

html2canvas($('#first-page'), {
onrendered: function(canvas) {            
    var doc = new jsPDF('p', 'mm');
    doc.addImage(canvas, 'PNG', 10, 10);
    doc.save('sample-file.pdf');
}
});

answered Jul 05 '17 at 14:41

David

609
1
4
11

1

Nice, I didn't know this. Unfortunately the problem continues, how @CBroe explained to me, toDataURL() not is the problem, but render the content onto canvas – Michel Makei Gefuni Jul 05 '17 at 14:45

toDataURL() very slow

1 Answers1