Как лучше всего экспортировать холст с изображениями высокого качества?

При работе с изображениями DPI не имеет значения. Изображения измеряются в пикселях, поэтому вам нужно это настроить. Вы можете смело игнорировать DPI, поскольку это не имеет смысла в данном контексте.

Масштабирование здесь вам не поможет - помните, что вы работаете с пиксельным устройством, а не с векторами, поэтому холст должен быть уже в том размере, который вы хотите использовать для печати и т. Д., Иначе у вас будет снижение качества из-за интерполяции при его масштабировании. .

Вот как:

Вам необходимо предварительно рассчитать размер холста в пикселях относительно того, какой размер вы хотите получить на заключительном этапе.

Допустим, вы хотите напечатать изображение размером 15 x 10 см (или около 6 x 4 дюйма) с разрешением 300 точек на дюйм. Затем вы вычисляете пиксели:

Width : 10 cm * 300 / 2.54 = 1181 pixels
Height: 15 cm * 300 / 2.54 = 1772 pixels

Для дюймов просто умножьте на DPI ( 4 дюйма! = 10 см, поэтому результат немного другой, числа выбраны для простоты ):

Width : 4 in * 300 = 1200 pixels
Height: 6 in * 300 = 1800 pixels

Для изображения размером 26,45 см при 300 DPI холст должен быть:

26.45 cm * 300 DPI / 2.54 inches = 3124 pixels.

Чтобы отобразить этот холст в меньшей области на экране, вы используете CSS для отображения элемента, например:

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas>

Теперь вы можете рисовать на холсте в его фактическом пиксельном положении, и он будет отображаться на экране в уменьшенном масштабе (но сохранит всю информацию на самом холсте). Если вы используете координаты мыши, вы просто пропорционально масштабируете положение мыши (позиция холста = координаты мыши * 3124px / 600px).

Для масштабирования и т. Д. Это становится немного сложнее, но принцип остается: окончательный размер вашего изображения должен быть таким же, как и конечный результат.

О DPI: если бы это изображение было 72 DPI или 300 DPI, количество пикселей было бы точно таким же. Причина, как уже упоминалось, в том, что изображения измеряются в пикселях.

DPI - это произвольное значение, когда речь идет о пиксельных устройствах (растровые изображения, мониторы, камеры и т. Д.), И используется только для программного обеспечения DTP, чтобы получить подсказку о размере для окончательной печати, которая будет использовать эту информацию только для предварительного масштабирования изображения в отношение к странице, которую вы используете для печати.