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