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

Мне нужна твоя помощь. Я объясняю свою ситуацию: Im использует библиотеку fabric.js для размещения фигур, текста и т.д. В моем приложении. Размер моего холста имеет 1000x1000 пикселей (около 26.45x26.45 сантиметров). У меня есть загрузка изображений script только для загрузки изображений с высоким качеством, например 300 dpi.

В основном я делаю следующее: - нарисовать холст (загружать изображения, помещать текст и т.д.); - изменить размер холста, умножая масштабный коэффициент, чтобы иметь возможность в конце иметь изображение с разрешением 300 точек на дюйм; - сохранить холст в формате PNG; - используя php/ajax и Imagick, поместите холст с качеством 300 точек на дюйм, сохраняя в формате jpg.

Проблема в том, что при сохранении холста качество загружаемых изображений будет уменьшаться, потому что я изменяю размер холста 72 dpi (на данный момент я сохраняю в PNG).

Я думаю, что возможное решение: при загрузке изображений сохраните позицию в массиве с положением x и y и размером до конца всего процесса, замените изображение в JPG. Если это лучший способ, можно сделать это с помощью библиотеки Imagick или PHP?

Я хотел бы узнать ваше мнение об этом.

Спасибо.

Ответ 1

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

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

Вот как:

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

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

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>

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

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

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

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