Tag Archives: ImageMagick

3D визуализация и дизайн

Как заменить однородный фон прозрачным с помощью Imagemagick

Бывает, что на сайт загружаются картинки с однородным фоном и возникает потребность в автоматической замене его (фона) на прозрачный.

Часто такая фича нужна для фотографий товаров в интернет-магазине, картинок, которые накладываются на корпоративный фон и других фоток, не портящих дизайн сайта. Вырезать каждую фотку вручную фотошопом довольно грустно, но есть php-методы, с помощью которых это можно «поставить на поток».

ImageMagic

Как это работает

Функция попиксельно ищет где заканчивается однородный цвет. После того, как все координаты вычислены — функция просто вырезает все, что находится снаружи.

Замена белого фона прозрачным возможна только если выходная картинка сохранена в формате PNG или GIF. Подойдут и новые форматы WebP и BPG с поддержкой прозрачности.

ImageMagic

Перед удалением фона всегда лучше ресайзить большую картинку. Если сделать это после — границы могут исказиться.

Замена фона, пример на bash

Для удаления фона в ImageMagick есть оператор -trim. Он обрезает картинку по заданному цвету:

Перед обрезкой стандартный JPEG конвертируется в PNG. В lossy JPEG’е фон не будет однородным. Соседние пиксели обычно незначительно отличаются по цвету. Например: белый, светло-серый, светло-голубой. Аргумент fuzz устанавливается в значение >0, чтобы разрешить функции считать соседние цвета одинаковыми.

Замена фона, пример на PHP

Пример обрезки белого фона на картинке (входной файл: image.jpg, выходной — trimmed.png):

Оператор borderImage рисует вокруг картинки рамку 1х1 в цвет фона, после чего оператор trimImage обрезает ее вместе с рамкой.

ImageMagic2

Внимание! Оператор trimImage работает, если Imagick скомпилирован с ImageMagick версии не ниже 6.2.9.

Как сделать фон однородным

Похожим способом можно заменить неоднородный фон на однородный при конвертации из JPEG в PNG:

В этом примере — каждый пиксель фона зальется одним цветом — пикселя с координатами (0;0).

ImageMagic3

Много примеров работы кода

Как работает обрезка фона с помощью библиотеки Imagick можно проверить тут. Онлайн-инструмент заменяет любой однородный фон на прозрачный, как с этим яблочком. Вот пример с черным фоном и сложными формами для трима (волосы). Конечно, может оставаться небольшая белая рамка. Но выглядит довольно прилично. Даже кошачьи усы вырезает на ура.

Конспект

 

  1. Для удаления однотонного фона с картинки можно использовать оператор
    -trim или команду trimImage.
  2. Проверить как работает удаление фона с помощью Imagick можно тут.
  3. Выходную картинку нужно сохранить в любом из форматов с поддержкой прозрачности: PNG, GIF, WebP, BPG.

Источник: http://habrahabr.ru/company/io/blog/261529/

Разработка и создание сайтов, интернет-магазинов, веб-приложений, порталов, лэндингов, мобильных приложений (Киев)

3D визуализация и интерьер

10 ключевых функций ImageMagick

В двух словах

  1. ImageMagick — консольный графический редактор, работающий практически со всеми существующими форматами графики.
  2. Предоставляет максимум функций для обработки картинок — ресайз, конвертация, рисование, анимация, специальные эффекты и т.д.
  3. Сложноват для новичков.

ImageMagick – незаменимый бесплатный инструмент для создания, конвертации и редактирования картинок. Особенно удобно применять для автоматизации.

Форматы

ImageMagick работает более чем со 100 форматами изображений, в том числе и с основными веб-форматами — JPEG, SVG, GIF, WebP и PNG.

Установка

Все устанавливается из пакетов :

При этом станут доступны 7 утилит: display, animate, identify, convert, montage, mogrify и composite.

Далее пройдемся по самым полезным и популярным свойствам ImageMagick.

1. Конвертация

С помощью функции convert Вы можете конвертировать картинки из одного формата в другой. Простейший пример — переход от JPEG к PNG:

2. Ресайз

Уменьшайте, увеличивайте картинки, задавая необходимый размер.

3. Рисование

Добавляйте к картинкам текст, геометрические фигуры, линии, кривые. Например, простая фигура — белый круг на голубом фоне:

4. Анимация

Вы можете создать GIF-анимацию — несколько картинок в рамках одного файла, сменяющие друг друга через заданный промежуток времени. Выполняется также с помощью утилиты convert. Ниже пример простой закольцованной анимации, где каждая новая картинка сменяет предыдущую:

Правильно комбинируя картинки, можно создавать эффект движения и даже короткие видео.

5. Специальные эффекты

Размытие и увеличение резкости — неотъемлемые части редактирования. Размытие может показаться лишней функцией, пока не понадобится создать фон или тени.

Можно также «размывать» четкие границы геометрических фигур. Параметр -blur 0x8 определяет степень размытия.

6. Прозрачность

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

7. Обрезка и границы

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

Например, для визуального увеличения площади картинки, можно наложить ее на прямоугольник большего размера, подобрав для него цвет. Тогда за счет образовавшейся рамки картинка будет занимать больше площади.

8. Комбинирование

Можно соединять изображения — накладывать одно другое или помещать рядом — склеивать.

Накладывать одну картинку поверх другой можно с помощью утилиты composite. Совмещать можно даже картинки разных форматов:

9. Текст и комментарии

Создание подписей, или добавление текста на картинки — наверное наиболее часто используемая функция ImageMagick. Она также одна из самых простых. Создание простейшей подписи из одного слова с выбором цвета фона и цвета текста:

10. Манипуляции

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

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

Источник: https://onthe.io/learn/ru/category/graphic/10-%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%B2%D1%8B%D1%85-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B9-ImageMagick

Разработка и создание сайтов, интернет-магазинов, веб-приложений, порталов, лэндингов, мобильных приложений (Киев)