Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Фильтры применяемые к изображению в HTML

Viktor | 24.02.2014 | нет комментариев

Изменяем изображение с помощью фильтров.

В прошлом уроке “Фильтры применяемые к тексту в HTML” мы с Вами изменяли текст на HTML странице с помощью фильтров. Язык гиперразметки (HTML) позволяет применять фильтры не только к тексту, но и к изображениям. Давайте рассмотрим какие фильтры работают в HTML и разберем эффекты, достигаемые с помощью фильтров. Все фильтры описанные в данной статье, будут применяться к этому Оригинальному изображению:

Во всех фильтрах прменяются следующие параметры:

  • Размер изображения: 200px X 200px
  • WIDTH=”Ширина изображения”
  • HEIGHT=”Высота изображения”
  • SRC=”Имя изображения”

Оригинальное фото (foto.jpg)

Фильтр Alpha.

Осветляет изображение.

Синтаксис: STYLE=”filter:Alpha(Opacity=’Opacity’, FinishOpacity=’Finishopacity’, Style=’Style’, StartX=’X', StartY=’Y', FinishX=’X', FinishY=’Y')”

Opacity – степень осветления (0-100. 0 светло, 100 темно).
FinishOpacity – конечная степень осветления (0-100. 0 светло, 100 темно).
Style – метод осветвления (число: 0(без осветвления), 1(линия) 2(круг) 3(прямоугольник)
StartX, StartY, FinishX, FinishY – координаты осветвляемой области

Листинг 20.1.

<P><IMG STYLE=”filter:Alpha(Opacity=’90′,FinishOpacity=’45′,Style=’2′)” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Alpha

“Играясь” с цифровыми значениями, можно варьировать степень осветленности всего изображения или его отдельных участков.

Фильтр Blur.

Размывает изображение в определенную сторону.

Синтаксис: STYLE=”filter:Blur(Add=’Add’, Direction=’Direction’, Strength=’Strength’)”

Add – умеренное или сильное размытие (соответственно 1 или 0)
Direction – в какую сторону произойдет размытие (oт 0 до 315)
Strength – смещение размытия

Листинг 20.2.

<P><IMG STYLE=”filter:Blur(Add=’1′,Direction=’310′,Strength=’10′)” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Blur

Фильтр Invert.

Инверсия изображения

Синтаксис: STYLE=”filter:Invert”

Листинг 20.3.

<P><IMG STYLE=”filter:Invert” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Invert

 

Фильтр Gray.

Делает изображение черно-белым

Синтаксис: STYLE=”filter:Gray”

Листинг 20.4.

<P><IMG STYLE=”filter:Gray” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Gray

Фильтр Chroma.

Определенный цвет делается прозрачным.

Синтаксис: STYLE=”filter:Chroma(Color=’Color’)”

Color – цвет выделения в шестнадцатиричном виде (напр. #000000) или название цвета на английском, например, Black, Red, Blue, Green. В данном случае цвет указан для фона.

Листинг 20.5.

<P><IMG STYLE=”filter:Chroma(Color=’#330300′)” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Chroma

Фильтр Xray.

Негативное изображение

Синтаксис: STYLE=”filter:Xray”

Листинг 20.6.

<P><IMG STYLE=”filter:Xray” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Xray

Использовать фильтры удобно когда нет возможности изменить оригинальное изображени и закачать на сервер, или для достижения определенного художественного эффекта.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB