javascript - JsPDF and chart.js: Increase chart resolution - Stack Overflow

admin管理员组

文章数量:1327697

I have written some code that displays two chart.js charts on a web page and then alows user to download the charts in pdf using jsPDF. The problem is that the resolution of the charts in pdf depends on the dpi settings of the display. For example, when I create the pdf using my work PC (1080p) the resolution is pretty bad. However, when my colleague uses us Macbook to generate the pdf, the images are very crisp.

How can I make the images independant of the display resolution and always produce high-res images. I am using toDataURL along with addImage to insert images into PDF.

I can also upload the code if needed.

Thanks

I have written some code that displays two chart.js charts on a web page and then alows user to download the charts in pdf using jsPDF. The problem is that the resolution of the charts in pdf depends on the dpi settings of the display. For example, when I create the pdf using my work PC (1080p) the resolution is pretty bad. However, when my colleague uses us Macbook to generate the pdf, the images are very crisp.

How can I make the images independant of the display resolution and always produce high-res images. I am using toDataURL along with addImage to insert images into PDF.

I can also upload the code if needed.

Thanks

• javascript
• canvas
• chart.js
• resolution
• jspdf

Share Improve this question Follow asked Oct 28, 2020 at 4:20 AbdullahAbdullah 5322 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

As @HandDod wrote, DPI is the solution!

Since a few versions Chart.js has the parameter devicePixelRatio. By default, the canvas is rendered in the DPI number by monitor, so 96 or Retina - not ideal for a printout, but perfect for the screen.

If you increase this value, more pixels are created. Expand the value so that you can export the chart in print quality as a Base64 image. The value does not affect the display of the chart on the monitor.

In my case, I set the value to 1.5.

options:{
      devicePixelRatio: 1.5
}

Documentation: https://www.chartjs/docs/3.0.2/configuration/device-pixel-ratio.html Works wonderfully ...

Since you are displaying charts in chart.js on a web page, the addImage data in jsPDF always depends on the resolution of your display. In your case you generated it on a low resolution PC and a macbook with a Retina display, and since the size of the image data set in addImage is different, the resolution of the PDF will naturally change as well.

My idea is to solve this problem by always keeping the size of the image data set by addImage constant.

I think you can use Window.devicePixelRatio to keep the size of the image data constant while taking into account the resolution of the screen.
https://developer.mozilla/en-US/docs/Web/API/Window/devicePixelRatio ...

What do you think?

本文标签： javascriptJsPDF and chartjs Increase chart resolutionStack Overflow