Класс работы с изображениями
Класс работы с изображениями CodeIgniter'а позволяет выполнять следующие действия:
- Изменение размера
- Создание эскиза
- Обрезка
- Поворот изображения
- Наложение "водяных знаков"
Поддерживаются все осноные библиотеки: GD/GD2, NetPBM, и ImageMagick
Примечание: Наложение "водяных знаков" доступно только в библиотеке GD/GD2 . Также GD используется для вычисления параметром изображения. Обработка же может проводиться с помощью Вашей библиотеки.
Инициализация класса
Как и большинство библиотек в CodeIgniter, этот класс загружается с помощью функции $this->load->library :
$this->load->library('image_lib');
После загрузки вызов класса будет производиться так: $this->image_lib
Обработка изображений
Вне зависимости от типа обработки (обрезка, поворот и т.д.), общая структура будет одинаковой. Сначала надо задать параметры, а затем вызвать необходимую функцию. Рассмотрим на примере создания эскиза:
$config['image_library'] = 'gd2'; // выбираем библиотеку
$config['source_image'] = '/путь/к/фалу/mypic.jpg';
$config['create_thumb'] = TRUE; // ставим флаг создания эскиза
$config['maintain_ratio'] = TRUE; // сохранять пропорции
$config['width'] = 75; // и задаем размеры
$config['height'] = 50;
$this->load->library('image_lib', $config); // загружаем библиотеку
$this->image_lib->resize(); // и вызываем функцию
Приведенный код вызывает функцию image_resize для обработки mypic.jpg, расположеннй в папке source_image , затем создает эскиз размером 75 X 50 пикселей с использованием библиотеки GD2 image_library. Затем флаг maintain_ratio указывает, что бы эскиз оказался как можно менее искаженным при новых размерах. Эскиз будет назван mypic_thumb.jpg
Примечание: Не забудьте установить права на запись для папки с изображением, иначе изображение не будет сохранено!
Функции обработки
Есть четыре функций для обработки изображений и одна дополнительная:
- $this->image_lib->resize()
- $this->image_lib->crop()
- $this->image_lib->rotate()
- $this->image_lib->watermark()
- $this->image_lib->clear()
Эти функции возвращают TRUE при успешном выполнении и FALSE в противном случае. Если произошла ошибка, то ее текст можно получить так:
echo $this->image_lib->display_errors();
Хорошим стилем является сразу создание кода, предусматривающего вывод ошибок:
if ( ! $this->image_lib->resize())
{
echo $this->image_lib->display_errors();
}
Примечание: Так же можно задать свой стиль вывода ошибок с помощью передачи функции в параметрах HTML-тегов:
$this->image_lib->display_errors('<p>', '</p>');
Параметры
Параметры функций описывают необходимые действия, что бы добиться желаемого результата.
Учтите, что не все параметры подходят для каждой функции. Например, x/y координаты применимы только для функции обрезки. Подобным образом, для обрезки параметры ширины и высоты не производят никакого действия. Таблица совместимости показывает, какие функции используют тот или иной параметр.
Легенда:
- R - Изменение размера
- C - Обрезка
- X - Поворот
- W - Наложение "водяного знака"
| Параметр | Значение по умолчанию | Опции | Описание | Совметимость |
|---|---|---|---|---|
| image_library | GD2 | GD, GD2, ImageMagick, NetPBM | Указывает библиотеку для обработки. | R, C, X, W |
| library_path | Нет | Нет | Указывает полные пути к библиотеке ImageMagick или NetPBM. Указывайте, если вы их используете. | R, C, X |
| source_image | Нет | Нет | Путь к файлу и его имя. Должен быть прямой серверный путь, не URL. | R, C, S, W |
| dynamic_output | FALSE | TRUE/FALSE (логичекое) | Указывает, сохранять ли полученное изображение или использовать для динамического вывода. Примечание: если выбрано динамическое использование, то изображение будет выведено с заголовками изображения - то есть только само изображение, без html и других изображений. | R, C, X, W |
| quality | 90% | 1 - 100% | Устанавливает качество изображения. Чем выше качество, тем больше размер файла. И наоборот. | R, C, X, W |
| new_image | Нет | Нет | Указывает путь и имя изображения для сохранения. Используется при создании копии изображения. Путь долженен быть относительным или абсолютным серверным путем, не URL. | R, C, X, W |
| width | Нет | Нет | Устанавливает желаемую ширину изображения. | R, C |
| height | Нет | Нет | Устанавливает желаемую высоту изображения. | R, C |
| create_thumb | FALSE | TRUE/FALSE (логическое) | Указывает функции, что надо создать эскиз. | R |
| thumb_marker | _thumb | Нет | Указывает имя для эскиза. Будет вставлено перед расширением файла, например mypic.jpg станет mypic_thumb.jpg | R |
| maintain_ratio | TRUE | TRUE/FALSE (логическое) | Указывает, сохранять пропорции или нет. | R, C |
| master_dim | auto | auto, width, height | Устанавливает размеры для создаваемого эскиза и при изменении. Например, вы хотите создать изображение 100 X 75 пикселей. Ели исходное изображение не позволяет изменить размер без сжатия, то данная настройка позволит изменить "жестко" размер. "auto" само определяет, шире или выше данное изображение нужного. | R |
| rotation_angle | None | 90, 180, 270, vrt, hor | Указывает угол поворота изображения. Учтите, что в PHP градусы измеряются против часовой стрелки, и поворот на 90 градусов вправо будет задан как на 270. | X |
| x_axis | Нет | Нет | Устанавливает X координату при обрезке. Например, при 30 обрежет изображение на 30 пикселей слева. | C |
| y_axis | Нет | Нет | Устанавливает Y координату при обрезке. Например, при 30 обрежет изображение на 30 пикселей сверху. | C |
Установка параметров в конфигурационном файле
Все параметры можно изначально задать в файле. Для этого создайте файл image_lib.php, добавьте в него массив $config. Затем сохраните в папке config/image_lib.php, и он будет использован автоматически. В таком случае отпадает необходимость в испльзовании функции $this->image_lib->initialize .
$this->image_lib->resize()
Эта функция позволяет изменять размер файла, создавать его копию и эскиз.
Практически нет никакой разницы между созданием эскиза и копии с измененным размером (разве только в установке названия типа mypic_thumb.jpg).
Эта функция поддерживает все параметры кроме трех: rotation_angle, x_axis и y_axis.
Создание эскиза
Функция создает эскиз в новом файле, если задан параметр create_thumb :
$config['create_thumb'] = TRUE;
Создание копии
Функция создает копию в новом файле и/или папке, если задан параметр new_image :
$config['new_image'] = '/новый/путь/new_image.jpg';
Примечания к данному параметру:
- Если задано только имя файла, то он будет сохранен в одной папке с оригинальным.
- Если задан только путь, то файл будет иметь такое же имя, как и оригинальный.
Изменение размера
Если ни один из предыдущих параметров не задан, то действия будут производиться с оригинальным файлом.
$this->image_lib->crop()
Функция обрезки аналогична функции изменения размера, за исключением того, что надо задать смещение по X и Y (в пикселях), указывающее, с какого места обрезать. Например, будет оставлена часть 100 * 40:
$config['x_axis'] = '100';
$config['y_axis'] = '40';
Все настройка доступны, кроме этих: rotation_angle, width, height, create_thumb, new_image.
Пример, как можно обрезать изображение:
$config['image_library'] = 'imagemagick';
$config['library_path'] = '/usr/X11R6/bin/';
$config['source_image'] = '/path/to/image/mypic.jpg';
$config['x_axis'] = '100';
$config['y_axis'] = '60';
$this->image_lib->initialize($config);
if ( ! $this->image_lib->crop())
{
echo $this->image_lib->display_errors();
}
Замечание. Без визуального интерфейса очень сложно правильно обрезать изображение, и эта функция будет более полезной, если вы сделаете к ней визуальную оболочку. Наример, подобную сделали авторы CodeIgniter'а в своей CMS ExpressionEngine в модуле галереи.
$this->image_lib->rotate()
Функция поворота изображения позволяет повернуть изображение на заданный угол:
$config['rotation_angle'] = '90';
Есть 5 опций поворота:
- 90 - поворот против часовой стрелки на 90 градусов.
- 180 - поворот на 180 градусов.
- 270 - поворот против часовой стрелки на 270 градусов.
- hor - зеркальное отображение по горизонтали.
- vrt - зеркальное отображение по вертикали.
Пример поворота изображения:
$config['image_library'] = 'netpbm';
$config['library_path'] = '/usr/bin/';
$config['source_image'] = '/path/to/image/mypic.jpg';
$config['rotation_angle'] = 'hor';
$this->image_lib->initialize($config);
if ( ! $this->image_lib->rotate())
{
echo $this->image_lib->display_errors();
}
$this->image_lib->clear()
Функция очистки обнуляет все предыдущие параметры. Используется для выполнения последовательных действий над изображением.
$this->image_lib->clear();
Создание "водяных знаков"
Функция создания "водяных знаков" требует наличия библиотеки GD/GD2 .
Два типа "водяных знаков"
Есть два типа "водяных знаков":
- Наложение текста: "Водяной знак" будет создан из текста, с использованием шрифтов True Type (если задали), или с помощью стандартных шрифтов. Если используются True Type шрифты, то версия GD должна поддерживать работу с ими.
- Наложение изображения: "Водяной знак" будет создан из изображения (обычно это полупрозрачные PNG или GIF) с наложением его поверх исходного изображения.
Создание "водяных знаков"
Как и при работе с другими функциями сначала следует задать параметры, а затем вызвать функцию обработки. Например:
$config['source_image'] = '/path/to/image/mypic.jpg';
$config['wm_text'] = 'Copyright 2009 - Tutulkin';
$config['wm_type'] = 'text';
$config['wm_font_path'] = './system/fonts/texb.ttf';
$config['wm_font_size'] = '16';
$config['wm_font_color'] = 'ffffff';
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'center';
$config['wm_padding'] = '20';
$this->image_lib->initialize($config);
$this->image_lib->watermark();
Этот код использует True Type шрифт размера 16 пикселей для создания текста. Текст будет расположен вверху по центру изображения, со смещением 20 пикселей относительно верха.
Важно: Что бы изменения сохранились, файл должен быть доступен на "запись". Установите права, например, 0777
Параметры "водяных знаков"
Эта таблица отображает параметры для обоих типов "водяных знаков"
| Параметр | Значение по умолчанию | Опции | Описание |
|---|---|---|---|
| wm_type | text | text, overlay | Устанавливает тип "водяного знака" |
| source_image | Нет | Нет | Указывает путь к исходному файлу |
| dynamic_output | FALSE | TRUE/FALSE (boolean) | Указывает, сохранять ли полученное изображение или использовать для динамического вывода. Примечание: если выбрано динамическое использование, то изображение будет выведено с заголовками изображения - то есть только само изображение, без html и других изображений. |
| quality | 90% | 1 - 100% | Устанавливает качество изображения. Чем выше качество, тем больше размер файла. И наоборот. |
| padding | Нет | Число | Устанавливает смещение в пикселях. |
| wm_vrt_alignment | bottom | top, middle, bottom | Устанавливает вертикальное выравнивание. |
| wm_hor_alignment | center | left, center, right | Устанавливает горизонтальное выравнивание. |
| wm_hor_offset | Нет | Нет | Устанавливает горизонтальное смещение (в пикселях) относительно выравнивания. Перемещает в сторону, обрантую выравниванию. При центровке - вправо. |
| wm_vrt_offset | Нет | Нет | Устанавливает вертикальное смещение (в пикселях) относительно выравнивания. Перемещает в сторону, обрантую выравниванию. При центровке - вниз. |
Параметры текста
Таблица показывает парамерты, применимые к текстовому типу "водяных знаков".
| Параметр | Значение по умолчанию | Опции | Описание |
|---|---|---|---|
| wm_text | Нет | Нет | Текст, который желаете вывести. Обычно это копирайты. |
| wm_font_path | Нет | Нет | Серверный путь к папке с True Type шрифтом, который желаете использовать. Если не задано, то будет использоваться стандартный GD шрифт (не поддерживает кириллицу!). |
| wm_font_size | 16 | Нет | Размер шрифта. Для стандартных - от 1 до 5. Для TT - любое число (размер в пикселях). |
| wm_font_color | ffffff | Нет | Цвет шрифта в hex-коде. Замечание: использовать полную hex-запись цвета; запись типа fff является неверной! |
| wm_shadow_color | Нет | Нет | Цвет тени в hex-коде. Краткая запись так же запрещена. |
| wm_shadow_distance | 3 | Нет | Расстояние (в пикселях) тени от основной надписи. |
Параметры наложения рисунка
Таблица показывает парамерты, применимые к "водяным знакам" в виде изображения.
| Параметр | Значение по умолчанию | Опции | Описание |
|---|---|---|---|
| wm_overlay_path | Нет | Нет | Серверный путь с изображению для наложения. Если задан, то будет использоваться данный тип "водяного знака" |
| wm_opacity | 50 | 1 - 100 | Прозрачность накладываемого изображения |
| wm_x_transp | 4 | Число | Если используется для наложения изображение типа PNG или GIF , то можно задать цвет, который будет "прозрачным". Задается координата пикселя этого цвета. Отсчет от верхнего левого угла; X координата |
| wm_y_transp | 4 | Число | Y координата "пикселя прозрачности". |