Создание мозаичных изображений с помощью Perl и ImageMagick

С помощью ImageMagick, GD и The Gimp можно создавать статичные и динамичные мозаичные изображения. Исследуем возможности ImageMagick и других инструментов с открытым исходным кодом для работы с графикой.

Натан Харрингтон, программист, IBM

Натан Харингтон (Nathan Harrington) - программист в IBM, работающий в настоящее время с Linux и с технологиями поиска ресурсов.



19.06.2008

Мозаичные изображения популярны в современных средствах представления информации благодаря своей визуальной привлекательности и технологической новизне. В данной статье раскрываются методы, необходимые для создания изображений мозаичного типа, содержащих текст и графику. Обсуждаемые в статье методики можно использовать для создания статического и динамического контента. Например, сотрудники IBM могут использовать описанный ниже метод для создания мозаичного изображения, составленного из имени руководителя, заполненного небольшими фотографиями его подчиненных.

Для доступа к изображениям и составления из них элементов мозаики используется Perl. Затем изображения обрабатываются в сценарии Perl с помощью модуля GD. Этот модуль используется также для создания накладываемой маски надписи, а набор инструментов ImageMagick позволяет скомпоновать все элементы в окончательное изображение. Используя The Gimp, будут созданы модифицированная версия пингвина Тукса (Tux) — талисмана Linux®, и мозаичное изображение на тему Linux.

Требования к оборудованию и ПО

Аппаратное обеспечение

Работа с изображениями требует больших объемов памяти и ресурсов процессора. Примеры, представленные в статье, разрабатывались на компьютере с процессором Pentium® III 500 Мгц и 512 Мб ОЗУ. Более медленные системы также должны подойти, но рекомендуется иметь по крайней мере 256 Мб ОЗУ, поскольку создаваемые изображения имеют размер почти 6 мегапикселей.

Программное обеспечение

Потребуются Perl, GD, The Gimp и ImageMagick - все они в большинстве дистрибутивов Linux устанавливаются по умолчанию. Дополнительные сведения о том, где можно скачать эти программы, приведены в разделе Ресурсы. feh - это отличная программа просмотра изображений, которая поможет вам при обработке мозаичных файлов (см. раздел Ресурсы).


Мозаичные изображения

Получение изображений

Внутренние информационные хранилища IBM включают в себя базу фотографий сотрудников со ссылками на их должностные обязанности. Я сделал поиск по полю должностных обязанностей и получил фотографии всех сотрудников, ответственных за developerWorks. Существует большое количество замечательных программ, предназначенных для создания библиотек изображений - их можно использовать при создании мозаик. Я включил несколько изображений в сопроводительные материалы к статье (см. раздел Загрузка).

Обработка элементов мозаики

Вне зависимости от источников получения изображений, для использования в мозаике они, скорее всего, потребуют дополнительной обработки. В моем наборе фотографий были изображения разного размера, а также пустые картинки «по умолчанию», которые не годились для использования в мозаике. Для удаления нежелательных изображений можно использовать программу просмотра feh.

  1. Просмотрите содержимое каталога с изображениями, используя команду feh -t images/. Эта команда отображает уменьшенные изображения каждой картинки с указанием под каждой из них соответствующего имени файла.
Рис. 1. Режим отображения уменьшенных изображений в feh.
Режим отображения уменьшенных изображений в feh
  1. Для удаления ненужных картинок используйте команду feh -F -d -A "rm %f" images/. При этом картинки будут отображаться в полноэкранном режиме. Для перехода к следующему изображению нажмите клавишу пробел, при появлении изображения, которое следует удалить, нажмите Enter (при этом задействуется опция ‘-A “rm %f”’, использующаяся для удаления изображения). Таким образом я удалил все бело-голубые картинки, использующиеся по умолчанию.
  2. Теперь, собрав необходимые изображения, нужно убедиться, что все они одного размера. Для моего примера подходят картинки размером 25 х 25 пикселей. При этом изображения достаточно велики, чтобы различить их содержимое, но достаточно малы, чтобы служить в качестве хорошего визуального компонента в конечном рисунке. Для приведения всех изображений к одному размеру используется команда ImageMagick mogrify -geometry 25 x 25 images/* Заметим, что эта команда изменит размер картинки до 25 х 25, сохранив исходные пропорции.

Текст с наложенной мозаикой

В качестве контейнера элементов мозаики используется текст “developerWorks”. Нужно создать прозрачное изображение с белым текстом, который потом будет наложен на элементы мозаики. Выполните следующие шаги:

  1. Создайте каталог overlays.
  2. Создайте файл build_text_overlay.pl со следующим кодом:
Листинг 1. build_text_overlay.pl
#!/usr/bin/perl -w

# build_text_overlay.pl создает прозрачное изображение

# с заданным пользователем фоновым текстом

use strict;

use GD;  # графическая библиотека



my $text = $ARGV[0] or die "Please specify text\n";  # текст для наложения



my $textlen = length($text);  # длина текста



# путь к файлу шрифта:

# помните, что при изменении шрифта необходимо изменить размер изображения

my $font = "./VeraMoBd.ttf";

my $width = 400 * $textlen;   # 400 – это число, подходящее для шрифта VeraMoBd



# создается новое GD-изображение высотой в 600 пикселей

#так оно будет хорошо смотреться на экране и при печати

my $image = new GD::Image($width,600);



# инициализация цветов

my $white = $image->colorAllocate(255,255,255);



$image->transparent($white);  # указать прозрачность белого цвета



# запись файла на диск

open(PNGOUT,"> overlays/empty_white_$text.png") or die

  "can't write to output file overlays/empty_white_$text.png";

print PNGOUT $image->png;

close(PNGOUT);



# вызывается команда convert для шрифта, фонового цвета и размера шрифта

# -draw 'text 50,490' указывает необходимый отступ верхнего левого угла

my $res = qq{ convert -font  $font  }.

          qq{ -fill "#ffffff" -pointsize 601 -draw 'text 50,490 "$text"' }.

          qq{ overlays/empty_white_$text.png overlays/done_$text.png};



	  $res =`$res`; # запуск команды
  1. Сохраните в рабочий каталог файл VeraMoBd.ttf.
  2. Запустите скрипт: perl build_text_overlay.pl developerWorks.
  3. Проверьте накладываемое изображение командой feh overlays/done_developerWorks.png.

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

  1. Создайте каталог backgrounds.
  2. Определите размер накладываемого текста командой identify overlays/done_developerWorks.png. В нашем примере размер изображения составляет 5600 х 600.
  3. Создайте файл build_background.pl со следующим кодом:
Листинг 2. build_background.pl
#!/usr/bin/perl -w

# build_backgroun.pl создает мозаичный фон

use strict;

use GD;  # графическая библиотека

use List::Util 'shuffle';  # упорядочение списка картинок случайным образом



my $im_width = $ARGV[0] or die "specify an image width, height, and filename";

my $im_height = $ARGV[1] or die "specify an image width, height, and filename";

my $filename = $ARGV[2] or die "specify an image width, height, and filename";



my @tilelist = `ls -1 images/`;  # создание массива картинок

my @randlist = shuffle(@tilelist);  # упорядочение массива случайным образом



# создание фоновой картинки

my $backimage = new GD::Image($im_width,$im_height);



# инициализация цветов

my $white = $backimage->colorAllocate(255,255,255);

my $black = $backimage->colorAllocate(0,0,0);



# запись файла на диск

open(PNGOUT,"> backgrounds/backimage_$filename.png") or die

  "can't write to output file backgrounds/backimage_$filename.png";

print PNGOUT $backimage->png;

close(PNGOUT);



# создание новой картинки

my $image = new GD::Image($im_width,$im_height,1);



my $xpos = 0;  # incrementer for x axis

my $ypos = 0;  # incrementer for y axis

my $row_total = $im_height / 25; # число строк для изображений высотой 600 пикселей



# для каждой строки

while( $ypos <=  $row_total ){

  $xpos = 0;

  #для каждого столбца

  while( $xpos <= $im_width ){



  # если список пуст, то создается новый

    if( @randlist < 1 ){

      @randlist = ();

      @randlist = shuffle(@tilelist);

    }



    # удаление использованной картинки из списка, чтобы она не повторялась в строке

    my $currimage = pop @randlist;



    # открытие картинки для чтения

    my $tileimg = newFromJpeg GD::Image( "images/$currimage");



    # вставка картинки в существующий шаблон

    $image->copy($tileimg,$xpos,($ypos*25),0,0,25,25);



    # переход к следующему столбцу

    $xpos += 25;



  }#while xpos < = width



  # переход к следующей строке

  $ypos++;



}#while coutn < $width



# запись файла изображения на диск

open( TILEOUT,"> backgrounds/back_$filename.png") or die

   "can't write to backgrounds/back_$filename.png";

  print TILEOUT $image->png;

close(TILEOUT);
  1. Запустите сценарий build_background.pl с размерами, определенными командой “identify”: perl build_background.pl 5600 600 developerWorks.
  2. Проверьте фоновое изображение командой feh backgrounds/back_developerWorks.png.

Теперь у нас есть фоновое мозаичное изображение и накладываемый текст с прозрачным фоном, готовые для совмещения. Создайте каталог composite, а затем используйте команду ImageMagick composite для наложения изображений друг на друга:

composite -compose in \

  backgrounds/back_developerWorks.png \

  overlays/done_developerWorks.png \

  composite/step1_developerWorks.png

Опция -compose in означает, что белый цвет в накладываемом изображении является переходным слоем, создающим изображение с прозрачным фоном и белым текстом, на который накладываются элементы мозаики.

Теперь наложите белый фон. Этот шаг необходим, так как многие программы, отображающие png (такие, как Internet Explorer), отображают прозрачный фон черным цветом вместо белого.

composite -compose over \

  composite/step1_developerWorks.png \

  backgrounds/backimage_developerWorks.png \

  composite/complete_developerWorks.png

Опция -compose over означает, что нужно наложить первое изображение на второе. Получившееся изображение можно посмотреть с помощью команды feh composite/complete_developerWorks.png. Уменьшенный вариант мозаичного изображения создается с помощью команды convert следующим образом:

convert -resize 800x600 \

  composite/complete_developerWorks.png \

  composite/800x600_complete_developerWorks.png
Рис. 2. Мозаика в тексте "developerWorks" (“e” увеличена, чтобы показать детали)
Мозаика в тексте developerWorks

Вот и все – наложение текста завершено! Описанные выше шаги можно повторить для любого текста, включив в него другие изображения. Мозаику можно добавить в существующее графическое оформление или распечатать на крупноформатном принтере. Код, создающий фоновое изображение, можно легко изменить таким образом, чтобы указать точные координаты каждого элемента мозаики. Эту информацию можно использовать для создания динамического приложения, отображающего для каждого пользователя расположение в мозаике его фотографии. Далее рассказывается о том, как объединить с мозаикой графические изображения.


Изображение с наложенной мозаикой

После создания текстовых наложений можно попробовать создать графические. Воспользуемся изображением Тукса, пингвина Linux. Помимо того, что использование этого изображения не грозит нам судебными разбирательствами, Тукс является хорошим примером, поскольку большая часть его тела и область глаз содержат белый цвет. Конечно, белый цвет не является единственным, который можно использовать при создании мозаики, но зато он упрощает шаги интеграции.

Вспомните, что в примере с наложением текста (который является хорошим кандидатом для создания постеров для вашей организации), мы сначала создали решетку из мозаичных элементов, а затем создали белый текст на прозрачном фоне такого же размера и наложили их друг на друга, используя команду composite -compose -in. Тот же процесс с одним дополнительным шагом в конце будет использован в примере с изображением. На этот раз потребуется создать две маски вместо одной.

  1. Возьмите какое-нибудь изображение Тукса. Можно загрузить красивую большую (2400 x 2796) картинку (см. раздел Загрузка).
  2. Откройте файл в The Gimp и уберите в изображении Тукса лишний фон. Используйте инструмент выбора произвольных участков (fuzzy select). Щелкните на белом фоне за пределами Тукса. Инвертируйте выбор, а затем вырежьте и вставьте выделенную часть в новый файл. Сохраните этот файл как transparent.tux.png - он будет контейнером для конечного изображения.
  3. Взяв за исходный файл transparent.tux.png, создайте для Тукса внешнее окружение. Используя инструмент выбора произвольных участков, щелкните на белом участке его живота и нажмите Ctrl+X для удаления. То же сделайте с белыми участками в области его глаз и сохраните файл как epi.overlay.tux.png.
Рис. 3. Внешние области изображения Тукса
Внешние области изображения Тукса
  1. Снова вернитесь к файлу transparent.tux.png. Используя инструмент выбора по цвету, щелкните в области живота Тукса. Это действие выделит все белые области на его животе и в области глаз. Используйте Ctrl+I ля инвертирования выбора, затем Ctrl+X для удаления всего, кроме ранее выбранных участков живота и глаз. Сохраните получившееся изображение в файле int.overlay.tux.png.
Рис. 4. Внутренняя область изображения Тукса
Внутренняя область изображения Тукса

Мы только что создали части изображения Тукса, содержащие только белые области в районе его живота и глаз, размещенные по центру рисунка. Это эквивалентно созданию белого текста на прозрачном фоне в предыдущем примере. Теперь нужно создать основу мозаики того же размера, что и картинка Тукса.

  1. Определите размер фона Тукса командой identify transparent.tux.png. В нашем случае размер равен 2312 х 2741.
  2. Создайте фон, набрав perl build_background.pl 2312 2741 tux.
  3. Затем необходимо провести наложение компонентов:
composite -compose in \

  backgrounds/back_tux.png \

  int.overlay.tux.png step1.png

Эта команда заполнит элементами мозаики области живота и глаз Тукса. Затем мы используем вторую маску:

composite -compose over \

  step1.png \

  epi.overlay.tux.png \

  composite/complete_tux.png

Опция -compose over накладывает первое изображение на второе. Результат можно увидеть, набрав команду feh composite/complete_tux.png. Уменьшенную версию мозаичного изображения можно создать с помощью команды convert следующим образом:

convert -resize 800x600 \

  composite/complete_tux.png \

  composite/800x600_complete_tux.png
Рис. 5. Мозаичное изображение головы Тукса крупным планом
Мозаичное изображение головы Тукса крупным планом

Официальный источник

Изображения талисмана Linux Тукса доступны на http://www.isc.tamu.edu/~lewing/linux/.


Заключение

С помощью описанных шаблонов и примеров мозаик можно создать несколько интересных изображений. Я предлагаю поэкспериментировать со степенью прозрачности, выбором цветов и другими фантастическими возможностями ImageMagick и Perl. Используя программное обеспечение с открытым исходным кодом для работы с MPEG и данный шаблон, можно извлекать из видеопотока отдельные кадры, накладывать на каждый из них маску и вставлять обратно. Попробуйте создать эффект наезда камеры с помощью опции convert -crop и создайте с ее помощью небольшой фильм. Теперь можно будет произвести большое впечатление на презентациях, создавая небольшие мозаичные анимации подобного рода.


Загрузка

ОписаниеИмяРазмер
Пример кодаos-mosaic_posters.zip790KB

Ресурсы

Научиться

  • Оригинал статьи (EN).
  • Информация о пакете ImageMagick.
  • Посетите сайт Boutell.com, чтобы узнать о GD, познакомиться с его API и посмотреть образцы кода.
  • Модули Perl, включающие GD.pm, и многое другое находится на сайте CPAN - исчерпывающей сети архивов Perl.
  • Семинары и обучение на developerWorks Россия.
  • Посетите раздел Open source сайта developerWorks, в котором находится обширная документация, практические руководства, инструменты и обновления продуктов, которые помогут в разработке программ с открытым исходным кодом и использовании их совместно с продуктами IBM.

Получить продукты и технологии

  • Программа просмотра изображений feh Тома Гилберта.
  • Если вам нужна самая лучшая программа по обработке изображений, скачайте The Gimp.
  • Загрузите пробную версию WebSphere Application Server V6.1.
  • Закажите SEK для Linux - набор из двух DVD-дисков с новейшим программным обеспечением IBM (пробные версии) для Linux от DB2®, Lotus®, Rational®, Tivoli® и WebSphere®.
  • Пробные версии программного обеспечения IBM, которые можно загрузить напрямую с developerWorks, помогут вам создать ваш следующий проект для Linux.

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source, Linux
ArticleID=315065
ArticleTitle=Создание мозаичных изображений с помощью Perl и ImageMagick
publish-date=06192008