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

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

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

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

Хотелось бы узнать ваше мнение по этому поводу.

Спасибо.

20
ptCoder 10 Июн 2013 в 17:55

1 ответ

Лучший ответ

При работе с изображениями 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, чтобы получить подсказку о размере для окончательной печати, которая будет использовать эту информацию только для предварительного масштабирования изображения в отношение к странице, которую вы используете для печати.

50
user1693593user1693593 11 Июн 2013 в 04:57
1
Другой подход здесь stackoverflow.com/questions/28778396/…
 – 
AZinkey
28 Фев 2015 в 09:54
@ K3N: Я последовал вашему предложению, но я застрял в проблеме, тексты, которые размещаются, очень маленькие. Посмотрите на скрипку jsfiddle.net/Q3TMA/1042
 – 
Abhinav
11 Апр 2016 в 14:42
Размер шрифта должен быть увеличен заранее перед отрисовкой. Вы можете использовать для этого scale () или попробовать напрямую с высотой шрифта. Последнее не всегда линейно из-за того, как сделан шрифт, но вы должны быть в состоянии приблизиться.
 – 
user1693593
12 Апр 2016 в 06:35
Но все же элементы управления размером кажутся маленькими, а что можно сделать с изображениями?
 – 
Abhinav
12 Апр 2016 в 09:51
Предлагаю вам открыть это как новый вопрос. Мой ответ здесь касается только основного принципа.
 – 
user1693593
12 Апр 2016 в 11:18