toDataURL() very slow
See original GitHub issueI 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.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:4
- Comments:8 (1 by maintainers)
Top Results From Across the Web
javascript - Why toDataURL is so slow?
If I transfer a simple image through the network, it's fast. When I try to transfer the same image created in a canvas...
Read more >Canvas toDataURL takes too long and blocks the browser
The time taken to execute toDataURL() call is roughly 40 times longer in Chrome than in Firefox 4 or Safari 5 ... It...
Read more >Javascript – Why toDataURL is so slow
If I transfer a simple image through the network, it's fast. When I try to transfer the same image created in a canvas...
Read more >Canvas operations really slow : r/javascript
Okay, guys, so I have a tool I made to auto generate a chart from data with ... toDataURL() + '" target="_blank"><img src="'...
Read more >HTMLCanvasElement.toBlob() - Web APIs | MDN
toBlob() method creates a Blob object representing the image ... If the file format is not specified, or if the given format is...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It is still slow in 2019, when extracting 5-6 html content into pdf with html2canvas.
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); }