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

问题描述

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

如何使图像与显示分辨率无关，并且始终生成高分辨率图像。我正在使用toDataURL和addImage来将图像插入PDF。

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

谢谢

解决方法

正如@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 ...

你怎么看？