HTML2canvas 生成模糊图像

Question

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

HTML 内容：

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

html2canvas 生成的图像：

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

有什么方法可以修复它，或者有更好的选择来获取图像形式的 html 吗？

谢谢！

原文由 jgabrielfaria 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发现了我的问题。碰巧我的屏幕是 Retina Display，所以当 canvas2html 渲染 HTML 时，由于 Retina 屏幕上像素密度的差异，图像呈现模糊。

在这里找到解决方案：

https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html

原文由 jgabrielfaria 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以在 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
});

原文由 Ricky sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议