Блог WEB-разработчика о PHP, MySQL, JavaScript и разработке
Инструкция по установке ImageMagick на Windows
ImageMagick — свободный и многоплатформенный пакет программ для неинтерактивной (пакетной) обработки графических файлов. Поддерживает множество графических форматов, выпущен под лицензией GPL. Может использоваться с языками Perl, C, C++, Python, Ruby, PHP, Pascal, Java, в скриптах командной оболочки или самостоятельно. Одним словом это консольный photoshop.
Инструкция по установке на MS Windows
перейдите по адресу http://imagemagick.org/script/binary-releases.php#windows что бы скачать последнюю версию ImageMagick-6.5.4-2-Q16-windows-dll.exe. В случае если эта версия не подошла к вашей системе, вы можете скачать более ранние тут.
Внимание! Измените папку установки программы на C:\imagemagick\
Откройте командную строку ( Пуск->Выполнить введите cmd и нажмите enter ). В появившемся окне введите convert. На экран должно выдать помощь по параметрам конвертирования. Если это так то переходите к следующему шагу.
Иначе нужно сделать вот что: выполните команду Свойства Моего компьютера -> Вкладка Дополнительно -> Переменные среды -> В блоке “системные переменные” найдите переменную с именем Path и добавьте туда еще одно значение C:\imagemagick. Внимание! Значения разделяются точкой с запятой.
Если вы используете PHP версии 5.2.х то скачивайте файл соответствующей версии.
Если у вас PHP версии 5.3.х то качайте для этой версии.
если вы используете стандартный Denwer то это C:\WebServers\usr\local\php5\ext , если PHP лежит в другом месте то в подпапку …\phpdir\ext папки с PHP.
если вдруг вы не обнаружили у себя такой папки, или вы самостоятельно поменяли название папки с расширениями то перемещайте в нее (что бы узнать где находится папка откройте файл php.ini и найдите
Directory in which the loadable extensions (modules) reside.
extension_dir = «Something something»
Заметки программиста
Здесь я делюсь мыслями об интересных проектах, библиотеках кода и инструментарии разработчика.
Поиск по этому блогу
Обработка изображений с ImageMagick
ImageMagick (http://www.imagemagick.org) — набор утилит для создания, редактирования, конвертирования и просмотра растровых изображений. Графический режим необходим только для просмотра. Для остальных действий над изображениями достаточно консоли. То есть налицо два отличия от привычных редакторов растровых изображений (вроде GIMP или Krita):
- использование набора утилит вместо одной программы
- для операций над изображениями не требуется GUI.
Очевидно, что таким инструментом вряд ли будут пользоваться художники, фотографы или дизайнеры. Чтобы разобраться для кого предназначен этот набор, предлагаю ознакомиться с предоставляемыми возможностями.
Что умеет ImageMagick?
Чтобы ответить на поставленный вопрос я перечислю входящие в набор утилиты, напишу какой функционал предоставляет каждая из них и, конечно же, приведу примеры использования.
identify — информационная утилита, воспользовавшись которой можно узнать формат изображения и множество других его свойств (например, высоту, ширину, количество используемых цветов). Также она предоставляет некоторую информацию о самом ImageMagick (поддерживаемые форматы, подключенные модули кодирования/декодирования изображения, флаги сборки, таблица цветов с соответствующими им значениями в RGB-системе). К тому же эта утилита умеет форматировать свой вывод. Например, чтобы для всех изображений в папке вывести имя файла и соответствующие ему ширину и высоту, скомандуем:
identify -format «%f %w %h» somedir/*
import — утилита, при помощи которой можно получить снимки всего экрана или указанного окна. Для получения снимка всего экрана выполним команду:
import -window root screen.ps
convert, mogrify — две утилиты со схожей функциональностью. Главное их отличие состоит в том, что первая на основе существующих изображений создает их модифицированные версии, а вторая модифицирует непосредственно сами изображения. Умеют эти утилиты немало: изменять размер изображения, обрезать его, удалять пятна, добавлять дрожание, размытость, зеркально отображать, рисовать поверх изображения, соединять несколько в одно, выполнять повторную выборку изображения и многое другое. Приведу несколько примеров:
convert test*.jpg -resize 50% test.png (изменение размера)
convert test2.jpg -mattecolor SlateBlue -frame 9×9+3+3 framed_test.jpg (добавление рамки заданного цвета)
convert test.jpg -thumbnail 200×135 thumbnail_test.jpg (создание миниатюры)
compare — используйте эту утилиту, чтобы определить разницу между исходным изображением и его модификацией. Имеется несколько метрик, по которым проводится сравнение. Выбрать нужную вам можно, воспользовавшись опцией -metric. Список допустимых значений этого параметра можно узнать, выполнив команду compare -list metric . Приведу пример:
compare -metric AE -fuzz 3% test.jpg test_mod.jpg compare_fuzz.jpg
Разберем его. Используется метрика AE = Absolute Error (общее число различных пикселей). Маленькое значение параметра fuzz указывает, что незначительными различиями можно пренебречь. Указаны сравниваемые изображения и последний параметр задает файл результата сравнения. Чтобы было понятно, что получается в результате приведу здесь пример сравниваемых изображений и результат выполнения команды (в результирующем изображении красным цветом обозначены отличающиеся пикселы). 
test.jpg
test_mod.jpg
compare_fuzz.jpg
composite — утилита наложения одного изображения на другое. Композиционные методы поделены на четыре группы:
- методы альфа-смешения (clear, src, dst, src-over, dst-over, src-in, dst-in, src-out, dst-out, src-atop, dst-atop, xor);
- методы математической композиции (multiply, screen, plus, add, minus, subtract, difference, exclusion, darken, lighten);
- методы композиции освещения (linear-dodge, linear-burn, color-dodge, color-burn, overlay, hard-light, linear-light, soft-light, pegtop-light, vivid-light, pin-light);
- специальные методы композиции (copy-*, change-mask).
Пример использования утилиты для добавления водяного знака к исходному изображению:
composite -dissolve 40% -gravity center watermark.gif test.png res.png
montage — эта утилита используется для создания составного изображения из нескольких отдельных.
montage test1.jpg test2.jpg res.jpg
stream — утилита для работы с изображением, как с потоком пикселей. Она пригодится при обработке больших изображений
stream -map i -storage-type double -extract 100×100+30+40 image.tif gray.raw
В этом примере мы извлекаем область 100×100 в оттенках серого из изображения в формате TIFF.
animate — утилита для анимации последовательности изображений.
animate *.jpg
display — утилита для просмотра изображений и их последовательностей. Пример использования:
display test.jpg
Но эта утилита еще полезна и тем, что помимо окна просмотра, предоставляет панель со множеством действий по обработке изображения, доступных из консоли. Можно сказать, что эта утилита является демонстрацией возможностей других утилит этого набора. Выглядит это так: 
conjure — утилита, позволяющая выполнять скрипты с определенными пользователем действиями по обработке изображений. Скрипты пишутся на MSL (Magick Scripting Language) — диалекте XML. Теги — это действия над изображениями (чтение файла, обработка изображения, получение его свойств, запись в файл и многое другое). Пример скрипта:
К сожалению, разработчики не уделяют достаточно внимания MSL, в частности, документированию его возможностей. Впрочем можно задать последовательность действий в скрипте командной оболочки. Если же этой возможности окажется недостаточно, вы можете написать собственную программу, воспользовавшись предоставляемым API. Имеются привязки к наиболее используемым языкам программирования (C, C++, Java, PHP, Python, Perl и другие). При чем для C имеется два API: MagickCore API (достаточно низкоуровневый) и MagickWand API (рекомендованный для широкого использования).
Работа с изображениями в Node.js — GraphicsMagick и ImageMagick
Поскольку изображения стали неотъемлемой частью Интернета, потребность в обработке изображений становится постоянной. Существуют различные библиотеки и двоичные файлы, которые используются для обработки изображений в Node.js, две из которых — GraphicsMagick и ImageMagick.
ImageMagick — это программное обеспечение для обработки изображений с открытым исходным кодом, предназначенное для создания, изменения и преобразования изображений. GraphicsMagick — аналогичный инструмент, который изначально был ответвлением проекта ImageMagick, который стал самостоятельным проектом с несколькими улучшениями.
Некоторые из преимуществ GraphicsMagick перед ImageMagick включают в себя большую эффективность, меньший размер, меньшее количество уязвимостей безопасности и, как правило, более стабильный, чем ImageMagick. Оба они доступны для использования в Node.js как пакеты NPM: GraphicsMagick и ImageMagick.
Установка GraphicsMagick и ImageMagick
Перед установкой любого из этих пакетов вы должны загрузить и установить в своей системе инструменты интерфейса командной строки (CLI). Вы также можете использовать ImageMagick прямо из GraphicsMagick.
Если вы планируете использовать модуль GraphicsMagick, вы можете установить инструменты ImageMagick или GraphicsMagick CLI. Если вместо этого вы хотите использовать ImageMagick, вам необходимо установить инструмент CLI ImageMagick.
После загрузки и установки необходимого инструмента CLI вы можете проверить версию своей установки, выполнив следующие команды на своем терминале.
Если оно было успешно установлено, на терминал будут распечатаны сведения об установленном программном обеспечении.
Аналогичным образом, если установка прошла успешно, в окне отобразится логотип GraphicsMagick.
Далее, чтобы добавить модуль в ваш проект, мы будем использовать npm .
Обработка изображений в Node.js с помощью GraphicsMagick
В этом руководстве мы узнаем, как работать с изображениями в Node.js, используя как GraphicsMagick, так и ImageMagick. В этом разделе мы начнем с GraphicsMagick.
Создайте папку с именем node-graphics-magick , инициализируйте проект Node с настройками по умолчанию и установите GraphicsMagick, как показано ниже:
Затем откройте папку с вашим любимым редактором кода и создайте файл index.js . Чтобы использовать модуль в проекте, импортируйте его с помощью require() . Мы также добавим модуль файловой системы fs , чтобы помочь нам взаимодействовать с файловой системой:
Вы также должны добавить изображение в свою папку, которое будет использоваться в этом руководстве, мы назовем его sample_image .
Как упоминалось ранее, модуль GraphicsMagick также позволяет использовать ImageMagick. Если вы хотите использовать эту опцию, вам нужно импортировать подкласс:
Вызов конструктора GM
Есть три способа вызвать метод конструктора gm .
1. Передавая путь к изображению в виде строкового аргумента:
2. Вы также можете передать ReadableStream или Buffer в качестве первого аргумента с необязательным именем файла для вывода формата:
3. Другой вариант — передать два целых числа для width и height с необязательным цветом фона для создания нового изображения на лету:
Получение информации об изображении
GraphicsMagick предоставляет несколько методов получения информации об изображениях. Один из них — это метод identify() . Он возвращает все доступные данные изображения:
После включения модуля gm мы вызвали конструктор gm() , а затем вызвали функцию identify() , передав функцию, которая принимает два аргумента — err для получения любой возникающей ошибки, value которая содержит информацию об изображении.
Мы печатаем в нашей консоли value и проверяем, есть ли ошибка. Если произошла ошибка, она будет записана в консоль. Вы можете использовать этот блок для обнаружения ошибок и отображения соответствующих сообщений в реальных жизненных ситуациях.
Обратите внимание, что значение может быть undefined .
Запуск этого кода вернет объект со всеми доступными нам данными изображения. Вот как выглядит результат для изображения, которое мы использовали:
В нем содержится информация о size , resolution , file size и depth , цвет изображения. Если вы хотите, получить некоторые из этих деталей по отдельности, есть отдельные функции, чтобы получить их, такие как: size() , format() , depth() , orientation() , res() и т.д.
Все они имеют тот же синтаксис, что и функция identify() . Например, если мы хотим получить размер изображения, мы должны использовать:
Изменение размера изображений
Также распространено изменение размера изображений. Синтаксис функций resize() :
Где параметры height и options не являются обязательными. Параметр options может быть либо % , @ , ! , или > . Мы рассмотрим каждый из них.
Указанные width и height являются максимальными значениями, допустимыми для обоих свойств.
Без указания каких-либо параметров options GraphicsMagick будет поддерживать соотношение сторон исходного изображения. Если заданы оба width и height , размер изображения будет изменяться до тех пор, пока он не достигнет максимального значения для одного или другого.
Тем не менее, вы можете заставить модуль изменить к данности width и height с помощью опции ! .
Мы также используем функцию write() для сохранения вывода в новый файл.
Изменение размера изображения до определенного width с сохранением соотношения сторон:
Мы также можем изменять размер изображения до тех пор, пока его размер не достигнет максимума width или height с сохранением соотношения сторон:
Или мы можем изменить размер изображения, чтобы оно соответствовало точному width и height , возможно, изменив исходное соотношение сторон:
Мы также можем использовать проценты вместо пикселей для изменения размера изображений, то есть мы можем изменить размер изображения до 50% от его исходного размера:
Конечно, вы также можете указать процентное значение выше 100%, чтобы увеличить изображение.
Другой интересный вариант, который вы можете использовать @ — это изменение размера изображения таким образом, чтобы оно занимало не более width * height пикселей. Это означает, что если вы напишете что-то вроде этого:
Размер изображения будет изменен таким образом, чтобы оно умещалось в области 10.000 пикселей (100 * 100 = 10.000 пикселей). Другими словами, если мы умножим ширину и высоту получившегося изображения, то получится число, меньшее или равное 10.000.
Теперь мы возьмем варианты > и :
- Параметр > изменяет размер изображения только в том случае, если ширина и высота данного изображения больше заданных width и height .
- Параметр изменяет размер изображения только в том случае, если ширина и высота данного изображения меньше заданных width и height .
Преобразование изображений из одного формата в другой
Еще одна распространенная вещь, которую мы хотели бы сделать с изображениями — это преобразовать изображение из одного формата в другой. Это можно сделать очень простым способом, просто изменив расширение файла на один из поддерживаемых форматов:
Обрезка изображений
Помимо изменения размера изображений, вы также можете обрезать изображения в своем приложении. GraphicsMagick имеет функцию crop() и ее синтаксис:
Где параметры имеют следующее значение:
- width и height — это размеры, до которых вы хотите обрезать изображение. Они обрабатываются либо как количество пикселей, либо как процент от исходного изображения в зависимости от параметра percentage .
- x и y являются необязательными параметрами, и они представляют собой координаты позиции, с которой должна начинаться обрезка. Значение по умолчанию — для обоих 0 , что означает, что обрезка начинается с верхнего левого угла изображения.
- Параметр percentage также является необязательным, и используется для определения, если значение данных width и height представляют собой проценты от размеров изображения или пикселей. Значение percentage по умолчанию — false .
Опять же, если вы проверите размеры нового изображения resized_img_crop1 , вы увидите, что оно составляет половину размера исходного изображения и обрезано в определенной позиции, а не в верхнем левом углу.
На изображении ниже показан пример:
Мы рассмотрели, как выполнять манипуляции с изображениями с помощью GraphicsMagick. Далее мы увидим, как это сделать в ImageMagick.
Обработка изображений в Node.js с помощью ImageMagick
Модуль ImageMagick некоторое время не поддерживался, и разработчики даже советуют использовать вместо него модуль GraphicsMagick. Однако в этом руководстве мы кратко рассмотрим некоторые из основных функций этого модуля.
Создайте папку с именем node-image-magick , следуя шагам, описанным в предыдущем разделе, установите модуль ImageMagick с помощью npm и создайте файл index.js .
В файл index.js добавьте модуль, используя require() :
Получение информации об изображении
Для получения информации об изображении в модуле image-magick также есть метод identify() . Первый аргумент — это путь к изображению, а второй — функция обратного вызова, которая имеет два аргумента: err для обработки ошибок и info для получения информации об изображении:
Запуск этого кода для нашего изображения выводит на печать:
Изменение размера изображений
ImageMagick предоставляет удобную функцию для изменения размера изображений, которая принимает объект, с параметрами для изменения размера изображения и функцией обратного вызова. Изменение размера изображений с помощью модуля ImageMagick следует следующему синтаксису:
Обрезка изображений
ImageMagick также предоставляет функцию обрезки изображений с тем же синтаксисом, что и функция resize() . Давайте посмотрим на простой пример использования:
В документации представлен список опций для каждой из вышеперечисленных функций.
Вывод
В этой статье мы изучили, как работать с изображениями в Node.js, используя как модули ImageMagick, так и GraphicsMagick. GraphicsMagick — лучший вариант из двух, учитывая все преимущества, которые он имеет перед ImageMagick.
Модуль GraphicsMagick содержит обширную документацию по дополнительным параметрам управления изображениями.