JsPDF 和 chart.js：提高图表分辨率

Question

我编写了一些代码，在网页上显示两个 chart.js 图表，然后允许用户使用 jsPDF 下载 pdf 格式的图表。问题是 pdf 中图表的分辨率取决于显示器的 dpi 设置。例如，当我使用我的工作 PC (1080p) 创建 pdf 时，分辨率非常差。但是同事用我们的Macbook生成pdf的时候，图片很清晰。

如何使图像独立于显示分辨率并始终生成高分辨率图像。我正在使用 toDataURL 和 addImage 将图像插入 PDF。

如果需要我也可以上传代码。

谢谢

Answer 1

由于您在网页上显示 chart.js 中的图表，因此 jsPDF 中的 addImage 数据始终取决于显示器的分辨率。在您的情况下，您是在低分辨率 PC 和具有 Retina 显示屏的 macbook 上生成它的，并且由于 addImage 中设置的图像数据的大小不同，因此 PDF 的分辨率自然也会发生变化。

我的想法是通过始终保持addImage设置的图片数据的大小不变来解决这个问题。

我认为您可以使用 Window.devicePixelRatio 来保持图像数据的大小不变，同时考虑到屏幕的分辨率。
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio ...

你怎么看？

Answer 2

正如@HandDod 所写，DPI 是解决方案！

由于一些版本 Chart.js 具有参数 devicePixelRatio。默认情况下，canvas 由显示器以 DPI 数字呈现，因此 96 或 Retina - 不适合打印输出，但适合屏幕。

如果增加此值，则会创建更多像素。扩展该值，以便您可以将打印质量的图表导出为 Base64 图像。该值不影响图表在显示器上的显示。

在我的例子中，我将值设置为 1.5。

options:{
      devicePixelRatio: 1.5
}

文档：https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html 效果很好...

JsPDF 和 chart.js：提高图表分辨率

JsPDF and chart.js: Increase chart resolution

javascript

canvas

resolution

jspdf

chart.js