HTML5 эффекты изображений - Sepia | Vladmaxi.net
ГлавнаяВеб-разработчикуHTML и HTML5HTML5 эффекты изображений – Sepia
Дата: 28.05.2013 в 21:43 | Просмотров: 2897

HTML5 эффекты изображений – Sepia

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

Сегодня мы продолжаем рассматривать эффекты изображений на HTML5 примеров, и сегодня я хочу поделиться с Вами способом применения эффекта сепии. Это не очень сложный метод, любой желающий может повторить его. Также сморите ещё один эффект изображений с HDR моделированием.

В нашем демо примере Вы можете добавить свои фотографии, добавив к ним эффект сепии, а также сохранить результат в виде готового изображения, нажав на кнопку “Получить изображение”, и сохранить изображение. Теперь давайте рассмотрим все это подробнее.

HTML структура и CSS стилизация

Вот html код для нашего эффекта:

В основном структура очень проста – 3 кнопки управления эффектами и место для получаемого результата. Что означает каждая из кнопок?

Следующее изображение – смена изображения на следующее, которое имеется в списке.

Применить Sepia эффект – применение эффекта, при повторном нажатии на эту кнопку, эффект будет более контрастный.

Получить изображение – получить изображение в формате jpg и сохранить его на свой компьютер.

Как добавить свои изображения в список? Для этого нужно сделать 2 шага:

  • В папку images загружаете свои фотографии, называя их именем pic + номер в формате jpg.
  • В файле script.js в строке 58 (if (iCur > 6) iCur = 1;), меняем значение 6 на количество изображений в папке.

Также обратите внимание, что данный скрипт работает только на хостинге в интернете.

И вот основные стили, которые мы используем:

Скрипт JavaScript

И конечно же, сам скрипт эффекта Sepia, без которого в принципе и бессмыслен этот урок :)

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

Заключение:

Надеюсь, что Вам понравился этот эффект, который выглядит, на мое мнение, очень даже шикарно с использованием canvas html5. Буду рад видеть ваши комментарии. Успехов! ;)


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


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