我编写了一些代码，在网页上显示两个 chart.js 图表，然后允许用户使用 jsPDF 下载 pdf 格式的图表。问题在于 pdf 中图表的分辨率取决于显示器的 dpi 设置。例如，当我使用我的工作 PC (1080p) 创建 pdf 时，分辨率非常糟糕。但是，当我的同事使用我们的 Macbook 生成 pdf 时，图像非常清晰。
如何使图像独立于显示分辨率并始终生成高分辨率图像。我正在使用 toDataURL 和 addImage 将图像插入 PDF。
如果需要，我也可以上传代码。
谢谢
【问题讨论】：
标签： javascript canvas chart.js resolution jspdf
正如@HandDod 所写，DPI 是解决方案！
自从几个版本以来，Chart.js 都有参数 devicePixelRatio。 默认情况下，画布由监视器以 DPI 数字呈现，因此 96 或 Retina - 不适合打印输出，但非常适合屏幕。
如果增加此值，则会创建更多像素。展开该值，以便您可以将打印质量的图表导出为 Base64 图像。该值不影响图表在监视器上的显示。
在我的例子中，我将值设置为 1.5。
options:{
devicePixelRatio: 1.5
}
文档：https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html 效果很好...
【讨论】：
由于您在网页上以 chart.js 显示图表，因此 jsPDF 中的 addImage 数据始终取决于您的显示分辨率。 在您的情况下，您是在低分辨率 PC 和具有 Retina 显示屏的 macbook 上生成的，由于 addImage 中设置的图像数据的大小不同，因此 PDF 的分辨率自然也会发生变化。
我的想法是通过始终保持 addImage 设置的图像数据的大小不变来解决这个问题。
我认为您可以使用 Window.devicePixelRatio 来保持图像数据的大小不变，同时考虑到屏幕的分辨率。
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio ...
你怎么看？
【讨论】：