Класс работы с изображениями
Класс работы с изображениями 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'] = '/path/to/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 опция включена, эскиз будет создан как можно ближе к указаным width(ширине) и height(высоте) при сохранении соотношения сторон. Эскиз будет назван mypic_thumb.jpg
Примечание
Для того чтобы класс изображений мог делать указанную обработку, папка содержащая файлы изображений должны иметь разрешения на запись.
Примечание
Обработка изображений может использовать значительный объем памяти сервера для выполнения некоторых операций. Если у вас возникли ошибки нехватки памяти при обработке изображений, вы может ограничить их максимальный размер и/или изменить лимиты памяти PHP.
Методы Обработки
Есть четыре доступные метода обработки:
- $this->image_lib->resize()
- $this->image_lib->crop()
- $this->image_lib->rotate()
- $this->image_lib->watermark()
Эти методы возвращают булево 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 доступны только для обрезки изображений. Кроме того, предпочтения ширины и высоты не оказывают никакого влияния на обрезку. Столбец “доступность” указывает, какие функции поддерживают предпочтения.
Availability Legend:
- R - Изменение размера изображения
- C - Обрезка изображений
- X - Вращение изображений
- W - Водяные знаки
Предпочтение | Значение по умолчанию | Варианты | Описание | Доступность |
---|---|---|---|---|
image_library | GD2 | GD, GD2, ImageMagick, NetPBM | Устанавливает библиотеку для работы с изображениями. | R, C, X, W |
library_path | Нет | Нет | Устанавливает серверный путь к ImageMagick или NetPBM библиотекам. Если вы пользуетесь этими библиотеками, необходимо указать путь. | R, C, X R, C, S, W |
source_image | Нет | Нет | Устанавливает источник изображения имя/путь. Путь должен быть относительный или абсолютным, не URL. | |
dynamic_output | FALSE | TRUE/FALSE (булево) | Определяет, будет ли новый файл изображения записан на диск или будет генерироваться динамически. Примечание: Если вы выберите динамический параметр, одновременно может быть показано только одно изображение, и оно не может быть позиционированно на странице. Он просто выводит поток изображения в браузере, наряду с заголовками изображений. | R, C, X, W |
file_permissions | 0644 | (число) | Права доступа для файловой системы на файл образа, записываемого на диск. ВНИМАНИЕ: Использовать целое восьмеричное числовое обозначение! | 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 | Нет | 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() метод, если вы сохраните настройки в конфигурационном файле.
Водяные знаки
Наложение водяных знаков требует GD/GD2 библиотеку.
Два типа водяных знаков
Существует два типа водяных знаков, которые можно использовать:
- ТЕКСТ: Водяной знак будет создаваться с помощью текста, указанным Вами шрифтом "True Type" или через родной текстовый вывод библиотеки GD. При использовании True Type, версия GD должна быть совместима с используемой True Type (в большинстве случаев).
- НАЛОЖЕНИЕ: Водяной знак будет создаваться путем наложения изоюражения (обычно прозрачный PNG или GIF) содержащий водяной знак.
Наложение водяных знаков на изображения
Так же как и другие методы (изменение размера, обрезка и вращение) общий процесс для создания водяных знаков подразумевает установку предпочтений действию, которое вы намерены выполнить, вызовая функцию создания водяных знаков. Вот пример:
$config['source_image'] = '/path/to/image/mypic.jpg';
$config['wm_text'] = 'Copyright 2006 - John Doe';
$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();
Приведенный выше пример будет использовать 16 пиксельный шрифт True Type, чтобы создать текст “Copyright 2006 - John Doe”. Водяной знак будет располагаться внизу по центру изображения, с отступом в 20 пикселов от нижней части изображения.
Примечание
Для того чтобы класс изображений мог делать любые обработки, файл изображения должен иметь права на “запись” - 777 (например).
Настройки водяных знаков
В данной таблице приведены настройки, доступные для обоих типов водяных знаков (текст/наложение)
Предпочтение | Значение по умолчанию | Варианты | Описание |
---|---|---|---|
wm_type | text | text, overlay | Установка типа водяных знаков, которые должны использоваться. |
source_image | Нет | Нет | Устанавливает источник изображения имя/путь. Путь должен быть относительный или абсолютный, не URL. |
dynamic_output | FALSE | TRUE/FALSE (булево) | Определяет, будет ли новый графический файл записан на диск или сгенерирован динамически. Примечание: Если вы выберите динамический параметр, одновременно может быть показано только одно изображение, и оно не может быть позиционированно на странице. Он просто выводит поток изображения в браузере, наряду с заголовками изображений. |
quality | 90% | 1 - 100% | Устанавливает качество изображения. Чем выше качество, тем больше Размер файла. |
wm_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 | Нет | Размер текста. Примечание: Если Вы не используете опцию True Type, число задается с помощью ряда 1 - 5. Иначе, можете использовать любой допустимый размер в пикселах для шрифта, который вы используете. |
wm_font_color | ffffff | Нет | Цвет шрифта, указанного в hex. Доступны оба метода: полный - где длина 6 символов (т.е. 993300) и короткий - где длина 3 символа (ie, fff). |
wm_shadow_color | Нет | Нет | Цвет тени, указанного в hex. Если вы оставите это поле пустым, тени не будут использоваться. Доступны оба метода: полный - где длина 6 символов (т.е. 993300) и короткий - где длина 3 символа (ie, fff). |
wm_shadow_distance | 3 | Нет | Расстояние (в пикселях) от шрифта, где должна быть тень. |
Настройки наложения
В данной таблице приведены параметры, доступные для способа наложения водяных знаков.
Предпочтения | Значение по умолчанию | Варианты | Описание |
---|---|---|---|
wm_overlay_path | Нет | Нет | Серверный путь к изображению, которое вы хотите использовать в качестве водяного знака. Требуется только если вы используете метод наложения. |
wm_opacity | 50 | 1 - 100 | Прозрачность изображения. Вы можете указать прозрачность водяного знака. Это позволяет водяному знаку не полностью скрывать детали исходного изображения под ним. Обычно используют значение 50%. |
wm_x_transp | 4 | Число | Если изображение водяного знака PNG или GIF, вы можете указать тональность изображения, чтобы сделать его “прозрачным”. Этот параметр (наряду со следующим) позволит указать тональность. Это работает путем указания “X” и “Y” координат в пикселях (измеряется от верхнего левого угла) в пределах изображения, где должна быть прозрачная область. |
wm_y_transp | 4 | Число | Наряду с предыдущей настройкой, позволяет указать координаты в пикселях для прозрачной области. |
Настройки класса
- class CI_Image_lib
- initialize([$props = array()])
Параметры: - $props (массив) – Обработка предпочтений изображения
Возвращает: TRUE при успехе, FALSE в случае недопустимых параметров
Возвращаемый тип: булево
Инициализирует класс для обработки изображений.
- resize()
Возвращает: TRUE при успехе, FALSE в случае неудачи Возвращаемый тип: булево Метод изменения размера изображения позволяет изменять размеры исходного изображения, создавать копию (с или без изменения размеров) или создать миниатюру/эскиз изображения.
Для практических целей нет разницы между созданием копии и миниатюры, за исключением того, что эскиз будет обладать маркером как часть имени (т.е. mypic_thumb.jpg).
Все настройки доступные для этого метода, кроме этих трех: rotation_angle, x_axis и y_axis, перечислены в таблице предпочтения.
Создание эскизов
Метод изменения размеров создает файл эскиза (и сохраняет оригинал) если установить эту настройку в TRUE:
$config['create_thumb'] = TRUE;
Это одиночное предпочтение определяет будет ли создан эскиз или нет.
Создание копии
Этот метод изменения размера создаст копию файла изображения (и сохранит оригинал) если вы зададите путь и/или новое имя файла с использованием этого предочтения:
$config['new_image'] = '/path/to/new_image.jpg';
Примечания касающиеся этого предпочтения:
- Если указано только новое имя, то файл будет помещен в ту же папку, что и исходный
- Если указан только путь, то новое изображение будет помещено в пункт назначения с тем же именем, что и оригинал.
- Если указаны оба параметра, то файл будет помещен в указанную папку с новым именем.
Изменение размера исходного изображения
Если ни одно из двух предпочтений, перечисленных выше (create_thumb и new_image) не используются, то метод изменения размеров будет обработки исходное изображение.
- crop()
Возвращает: TRUE при успехе, FALSE в случае неудачи Возвращаемый тип: булево Метод обрезки работает почти идентично функции изменения размера, кроме необходимости установить настройки для осей X и Y (в пикселях), определяющей область для обрезания:
$config['x_axis'] = 100; $config['y_axis'] = 40;
Все настройки, кроме этих трех: rotation_angle, create_thumb and 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(); }
Примечание
Без визуального интерфейса трудно обрезать изображения, так что этот метод не очень полезен, если вы не намерены создать такой интерфейс. Что мы и сделали для модуля фотогалереи в ExpressionEngine, в CMS, которую мы разрабатываем. Мы добавили JavaScript для пользовательского интерфейса, что позволяет выбрать области обрезки.
- rotate()
Возвращает: TRUE при успехе, FALSE в случае неудачи Возвращаемый тип: булево Метод вращения изображения требует, чтобы угол поворота устанавливался через его предпочтения:
$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(); }
- watermark()
Возвращает: TRUE при успехе, FALSE в случае неудачи Возвращаемый тип: булево Создает водяные знаки на изображении, пожалуйста, обратитесь к разделу водяные знаки для более подробной информации.
- clear()
Возвращаемый тип: смешанный Метод Clear сбрасывает все значения, используемые при обработке изображения. Его следует использовать при обработке изображений в цикле.
$this->image_lib->clear();
- display_errors([$open = '<p>[, $close = '</p>']])
Параметры: - $open (строка) – Тег открытия сообщение об ошибке
- $close (строка) – Тег закрытия сообщение об ошибке
Возвращает: Сообщения об ошибках
Возвращаемый тип: строка
Возвращает все найденные ошибки в формате строки.
echo $this->image_lib->diplay_errors();