Как лучше всего экспортировать холст с высококачественными изображениями?
Мне нужна ваша помощь. Я объясняю свою ситуацию: я использую fabric.js библиотека для размещения фигур, текста и т.д. в моем приложении. Размер моего холста составляет 1000x1000 пикселей (около 26.45x26.45 сантиметров). У меня есть скрипт загрузки изображений только для загрузки изображений в высоком качестве, например 300 точек на дюйм.
В основном я делаю следующее: - нарисуйте холст (загрузка изображений, размещение текста и т. Д.); - измените размер холста, умножив его на коэффициент масштабирования, чтобы в конце получить изображение с разрешением 300 точек на дюйм; - сохранить холст в формате PNG; - используя php/ajax и Imagick, поместите холст с качеством 300 точек на дюйм, сохранив в формате jpg.
Проблема в том, что при сохранении холста качество загруженных изображений будет ухудшаться, потому что размер холста составлял 72 dpi (на момент сохранения в формате PNG).
Я думаю, что возможное решение таково: при загрузке изображений сохраните позицию в массиве с позицией x и y и размером до конца всего процесса, замените изображение в формате JPG. Если это лучший способ, то можно ли сделать это с помощью библиотеки Imagick или на PHP?
Я хотел бы узнать ваше мнение по этому поводу.
Спасибо.
1 answers
Разрешение на дюйм не имеет никакого значения при работе с изображениями. Изображения измеряются в пикселях, так что это то, что вам нужно настроить. Вы можете смело игнорировать 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>
Теперь вы можете рисовать на холсте в его фактическом положении в пикселях, и он будет отображаться в уменьшенном масштабе на экране (но сохранит всю информацию на самом холсте). Если вы используете координаты мыши, вы просто пропорционально масштабируете положение мыши (положение холста = координаты мыши * 3124 пикселей/600 пикселей).
Для масштабирования и т. Д. Это становится немного сложнее, но принцип остается: конечный размер вашего изображения должен быть что касается конечного результата.
О разрешении на дюйм: если бы это изображение имело разрешение 72 или 300 точек на дюйм, количество пикселей было бы точно таким же. Причина, как уже упоминалось, заключается в том, что изображения измеряются в пикселях.
DPI является произвольным значением, когда речь идет о пиксельных устройствах (растровых изображениях, мониторах, камерах и т. Д.), И используется только для программного обеспечения DTP, чтобы получить подсказку о размерах для окончательной печати, которая будет использовать эту информацию только для предварительного масштабирования изображения по отношению к странице, которую вы используете для настройки печати. с.