toDataURL()非常缓慢

Question

我有一个包含图表和表格的报告。
我正在使用 html2canvas 和 jsPDF 将此报告导出为 PDF 文件。

但是该过程需要很长时间，超过 11000ms。 我尝试了更改格式、质量等等，但都没有起作用。

以下是我使用的代码:

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

我是做错了什么还是真的存在问题？
我该如何提高性能？

- Michel Makei Gefuni

---

你确定是这一步骤花费了这么多时间吗？我想渲染你的内容到画布上也需要相当长的时间... - CBroe

@Blindman67 大约1170x1400这样的尺寸，是一个完整的页面。 - Michel Makei Gefuni

https://dev59.com/3XRC5IYBdhLWcg3wYf8p - CBroe

@CBroe 你是对的，我刚刚测量了 toDataURL() 的时间，只有28.19482421875毫秒。 - Michel Makei Gefuni

可能问题出在插件html2canvas上，在将内容渲染到画布上的步骤中。 - Michel Makei Gefuni

Answer 1

你不需要使用 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');
}
});

- David

---

很好，我不知道这个。 不幸的是，问题仍然存在，正如@CBroe向我解释的那样，toDataURL()不是问题所在，而是将内容渲染到画布上。 - Michel Makei Gefuni