HTML5 эффекты изображений - HDR моделирование | Vladmaxi.net
ГлавнаяВеб-разработчикуHTML и HTML5HTML5 эффекты изображений – HDR моделирование
Дата: 27.05.2013 в 22:53 | Просмотров: 2352

HTML5 эффекты изображений – HDR моделирование

эффекты изображений на html5
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы рассмотрим один экспериментальный приём на Canvas HTML5. И мы сделаем хороший HDR (High Dynamic Range) фильтр или эффект для изображений. Мы будем использовать преобразование пикселей с помощью скрипта.

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

HTML код. Разметка.

Вначале мы подготовим наш заголовок html документа:

Мы подключили JQuery библиотеку (с официального сайта Google), а также наш основной файл скрипта script.js, который и отвечает за работу нашего фильтра HDR.

Далее, в теле нашего документа (после тега body) мы имеем следующий код:

Это наш главный код HTML5 Canvas и две кнопки действий (переключение изображения и применение фильтра).

Скрипт JavaScript

Теперь, давайте создадим новый пустой файл script.js и разместим в нем следующий код:

Как обычно (в подобных скриптах), после того, когда страница загружена, мы создаем canvas и все остальные объекты. После этого скрипт загружает первое изображение, а после – добавляет обработчики событий для нашей кнопки. Когда мы нажимаем на кнопку "Применить HDR эффект кнопку", вызывается функция processHrdEffect. Затем скрипт перебирает все пиксели изображения и меняет их значения.

Обратите внимание, что он использует функцию "sin". Это означает, что он изменяет контрастность пикселей среднего диапазона. Это означает, что все яркие места изображения станут более легкими, и темные – более темными. Это и есть эффект HDR моделирования. Думаю, этот эффект будет Вам полезен :) .


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.script-tutorials.com
Перевел: Владислав Бондаренко


Добавить комментарий