Работа с изображениями средствами phpThumbOf

phpThumbOf — это аддон для MODx, основанный на популярном скрипте phpThumb. Он позволяет модифицировать изображения средствами различных графических библиотек «на лету».

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

Причиной написания поста послужил тот факт, что официальная документация по phpThumbOf просто ужасна. Прочитав ман, я подумал, что единственной функцией, которую можно использовать для модификации изображения при его выводе является зум-кроп (zoom-crop), ибо больше там ничего не сказано. Но позже, попробовав использовать некоторые другие опции phpThumb я выяснил, что они прекрасно работают!

Анатомия phpThumbOf — фильтр вывода

Фильтр Вывода MODx-а позволяет прогнать значение элемента через любой набор фильтров непосредственно перед его выводом на страницу. Синтаксис выглядит следующим образом:

[[element:modifier=`value`]]

Первым и наиболее правильным способом использования phpThumbOf является именно Фильтра Вывода, который добавляется к TV-параметру типа «изображение».

Просто для полноты рассказа, я покажу, как добавить такой tv-параметр к шаблону.

Для начала, создайте новый tv-параметр и назовите его как сочтёте нужным. Мой вариант:

Далее, в закладке «Тип ввода» выберите «Изображение»:

Все, что нам осталось сделать, это указать способ вывода tv-параметра — ставим SRC.

Для экспериментов выберем какую-нибудь интересную картинку. Я нашёл себе такую:

Теперь, когда мы указали в каком-нибудь ресурсе выбранную нами куртинку в качестве значения созданного нами дополнительного параметра, его можно вывести в контенте ресурса с помощью конструкции:

<img src=»[[*tvImage]]» />

Как я упоминал в начале статьи, выходной фильтр изменяет элемент до того, как он будет отрисован на странице. Передадим значение нашего tv-параметра выходному фильтру phpThumbOf:

[[*tvImage:phpthumbof=`w=120&h=120`]]

Ремарка: если мы выводим tv-параметр в шаблоне или чанке, то знак звездочка "*" нужно заменить на плюс "+": [[+tvImage:phpthumbof=`w=120&h=120`]]

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

Избежать этого можно очень просто, достаточно не указывать ширину или высоту. Давайте оставим только фиксированную ширину:

[[+tvImage:phpthumbof=`w=120`]]

Теперь результирующее изображение отмасштабировано только по заданной ширине, высота будет пропорциональной исходному соотношению сторон.

Как Вы можете видеть, возможности ресайза изображений безгранично гибки. Вот ещё один пример с шириной 270 пикселей. Кроме того, вы можете получать на выходе изображения больше оригинального, но это порочная практика ;).

[[*tvImage:phpthumbof=`w=270`]]

Обрезка изображения с точными размерами

Если мы хотим получить изображение с размерами именно 120 на 120 пикселей, мы можем его обрезать. Для этого, необходимо добавить опцию кропа (zoom-crop) &zc=1.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1`]]

Теперь мы имеем обрезанную версию нашего изображения с точными размерами и без белых полей.

Фильтры PhpThumb — веселье только начинается

Теперь, когда вы знаете, как управлять размером изображения, я покажу вам реальную силу phpThumb — фильтры. Я просто приведу несколько примеров фильтров, доступных в phpThumb. Обратите внимание, что все новые фильтры я добавляю в конец предыдущих примеров. При этом, их позиция имеет значение! Фильтры применяются слева направо.

Blur (размытие)

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=blur|10`]]

Grayscale (преобразование палитры в градации серого)

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray`]]

Скругление углов

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=ric|20|20`]]

Обратите внимание, что у изображения появились белые углы в тех местах, где изображение «скруглилось». Мы можем побороть эту проблему, преобразовав результирующее изображение в PNG-формат.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=ric|20|20`]]

Рамка

Периодически возникает необходимость добавить к изображению рамку. Конечно, это можно сделать средствами CSS. Но иногда возникают моменты, когда CSS бесполезен. Я хочу показать Вам один из таких примеров.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=bord|5|0|0|FFFFFF&fltr[]=rot|-15|E4F6FE`]]

Вращение изображения

Вращение требует небольшого пояснения. Вы должны указать цвет фона для неграфических области в углах. В этом примере мы используем #006699, вращение -45°.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699`]]

Если Вы хотите уменьшить количество JPG=артефактов, вы можете увеличить качество изображения (1-100):

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699&q=100`]]

Если Вы хотите получить прозрачный фон, просто измените вывод в PNG, как мы делали это раньше:

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|&f=png`]]

Color Overlay (наложение цвета)

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

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=clr|35|990033`]]

Если Вы хотите получить двухцветное изображение, необходимо сначала наложить фильтр grayscale для обесцвечивания картинки.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=clr|35|990033`]]

Простой текстовый водяной знак

С помощью phpThumb Вы можете накладывать на изображение текстовые и графические водяные знаки. В случае с текстовыми вотермарками Вы можете указать размер, положение, прозрачность и TTF-шрифт.

Вообще, доступных очень много. Рекомендую ознакомиться с документацией.

Вот простой водяной знак на основе стандартного шрифта сервера:

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=wmt|Belafonte Code|3|T|FFFFFF||100|20|0||0|`]]

Финиш

Вот, наверно, и все о чем я хотел рассказать. С бОльшим количеством примеров использования phpThumb вы можете ознакомиться на официальной странице проекта.

статья взята с habra вот оригинал статьи http://habrahabr.ru/post/131424/

Отправить комментарий

Другие статьи рубрики "modx revo снипет phpthumbof ( сжатие рисунка, обрезка и т.д.)"