Сниппет phpThumbOf

Опубликовано: 05 Сен 2014

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

phpThumbOf - фильтр вывода

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

[ [element:modifier=`value`]]

Первым и наиболее правильным способом использования phpThumbOf является именно Фильтра Вывода, который добавляется к TV-параметру типа «изображение». Просто для полноты рассказа, я покажу, как добавить такой tv-параметр к шаблону. Для начала, создайте новый tv-параметр и назовите его как сочтёте нужным. Далее, в закладке «Тип ввода» выберите «Изображение. Все, что нам осталось сделать, это указать способ вывода tv-параметра — ставим SRC. Теперь, когда мы указали в каком-нибудь ресурсе выбранную нами картинку в качестве значения созданного нами дополнительного параметра, его можно вывести в контенте ресурса с помощью конструкции:

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

Передадим значение нашего tv-параметра выходному фильтру phpThumbOf:

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

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

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

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

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

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

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

Фильтры 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 вы можете ознакомиться на официальной странице проекта.

Комментарии (0)


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




Разрешённые теги: <b><i><br>Добавить новый комментарий: