javascript - JsPDF和chart.js : Increase chart resolution

Question

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

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

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

谢谢

Answer 1

正如 @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效果非常好...