#javascript #canvas #chart.js #resolution #jspdf
#javascript #холст #chart.js #разрешение #jspdf
Вопрос:
Я написал некоторый код, который отображает два chart.js диаграммы на веб-странице, а затем позволяет пользователю загружать диаграммы в формате PDF с помощью jsPDF. Проблема в том, что разрешение диаграмм в формате pdf зависит от настроек dpi дисплея. Например, когда я создаю PDF-файл с помощью своего рабочего ПК (1080p), разрешение довольно плохое. Однако, когда мой коллега использует американский Macbook для создания PDF-файла, изображения получаются очень четкими.
Как я могу сделать изображения независимыми от разрешения дисплея и всегда создавать изображения с высоким разрешением. Я использую toDataURL вместе с addImage для вставки изображений в PDF.
Я также могу загрузить код, если это необходимо.
Спасибо
Ответ №1:
Как писал @HandDod, DPI — это решение!
Начиная с нескольких версий Chart.js имеет параметр devicePixelRatio. По умолчанию холст отображается с числом точек на дюйм на мониторе, поэтому 96 или Retina — не идеально для распечатки, но идеально подходит для экрана.
Если вы увеличите это значение, будет создано больше пикселей. Разверните значение, чтобы вы могли экспортировать диаграмму в качестве печати как изображение Base64. Значение не влияет на отображение диаграммы на мониторе.
В моем случае я установил значение 1.5.
options:{
devicePixelRatio: 1.5
}
Документация: https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html
Работает замечательно…
Комментарии:
1. отличный ответ! В случае, если здесь что-то появится, я обнаружил, что 1.5 по-прежнему слишком низкое разрешение. Я использовал 4, и он отлично работает для печати.
Ответ №2:
Поскольку вы отображаете диаграммы в chart.js на веб-странице дополнительные данные изображения в jsPDF всегда зависят от разрешения вашего дисплея. В вашем случае вы сгенерировали его на ПК с низким разрешением и macbook с дисплеем Retina, а поскольку размер набора данных изображения в addImage отличается, разрешение PDF также, естественно, изменится.
Моя идея состоит в том, чтобы решить эту проблему, всегда сохраняя размер данных изображения, установленных addImage, постоянным.
Я думаю, вы можете использовать Window.devicePixelRatio, чтобы сохранить размер данных изображения постоянным, принимая во внимание разрешение экрана.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio …
Что вы думаете?