javascript - HTML2canvas 生成模糊图像

Question

我正在使用 jsPDF，它使用 html2canvas 从一些 html 元素生成图像并插入到 .pdf 文件中。但是在 html2canvas 上有一个问题，它从 html 生成模糊的图像。请参见下面的示例:

HTML 内容:

http://puu.sh/7SZz4.png

html2canvas 生成的图像:

http://puu.sh/7SZAT.png

有什么办法可以解决这个问题，或者有什么更好的选择来从 html 获取图像吗？

谢谢!

Answer 1

您可以在 html2canvas 中使用缩放选项。

在最新版本 v1.0.0-alpha.1 中，您可以使用缩放选项来增加分辨率(缩放:2 将使分辨率从默认的 96dpi 增加一倍)。

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});