→ Веб-разработчику → HTML и HTML5 → HTML5 эффекты изображений – Sepia

Дата: 28.05.2013 в 21:43 | Просмотров: 3960

Метки: html5, HTML5 эффекты изображений

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

Скачатьбесплатно с сервера

Демодемонстрация

↓ Также Вам будет интересно ↓

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

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

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

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

<!DOCTYPE html>

<head>

<title>HTML5 эффекты изображений - Sepia | Vladmaxi.net</title>

google.load("jquery", "1.7.1");

</script>

</head>

<body>

<div id="next" class="button">Следующее изображение</div>

<div id="sepia" class="button">Применить Sepia эффект</div>

<div id="toImage" class="button">Получить изображение</div>

</div>

</div>

</body>

</html>

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

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

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

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

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

margin:0;

padding:0;

}

body {

background-image:url(../images/bg.png);

color:#fff;

font:14px/1.3 Arial,sans-serif;

}

header {

background-color:#212121;

box-shadow: 0 -1px 2px #111111;

display:block;

height:70px;

position:relative;

width:100%;

z-index:100;

}

header h2{

font-size:22px;

font-weight:normal;

left:50%;

margin-left:-400px;

padding:22px 0;

position:absolute;

width:540px;

}

header a.stuts,a.stuts:visited {

border:none;

text-decoration:none;

color:#fcfcfc;

font-size:14px;

left:50%;

line-height:31px;

margin:23px 0 0 110px;

position:absolute;

top:0;

}

header .stuts span {

font-size:22px;

font-weight:bold;

margin-left:5px;

}

.container {

color: #000000;

margin: 40px auto;

overflow: hidden;

position: relative;

width: 1020px;

}

#source {

float: left;

margin: 0 20px 0 0;

}

.button {

cursor: pointer;

height: 13px;

position: relative;

text-align: center;

width: 500px;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

.actions {

left: 10px;

position: absolute;

top: 10px;

z-index: 2;

}

.button {

background-color: #d7e5f5;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));

border-top: 1px solid #abbbcc;

border-left: 1px solid #a7b6c7;

border-bottom: 1px solid #a1afbf;

border-right: 1px solid #a7b6c7;

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

border-radius: 12px;

-webkit-box-shadow: inset 0 1px 0 0 white;

-moz-box-shadow: inset 0 1px 0 0 white;

box-shadow: inset 0 1px 0 0 white;

color: #1a3e66;

font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

line-height: 1;

margin-bottom: 7px;

padding: 5px 0 4px 0;

text-align: center;

text-shadow: 0 1px 1px #fff;

width: 190px;

}

.button:hover {

background-color: #ccd9e8;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8));

border-top: 1px solid #a1afbf;

border-left: 1px solid #9caaba;

border-bottom: 1px solid #96a3b3;

border-right: 1px solid #9caaba;

-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;

-moz-box-shadow: inset 0 1px 0 0 #f2f2f2;

box-shadow: inset 0 1px 0 0 #f2f2f2;

color: #163659;

cursor: pointer;

}

.button:active {

border: 1px solid #8c98a7;

-webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;

-moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;

box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;

}

Скрипт JavaScript

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

// variables

var canvas, ctx;

var imgObj;

// set of sepia colors

var r = [0, 0, 0, 1, 1, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 12, 13, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 39, 40, 41, 42, 44, 45, 47, 48, 49, 52, 54, 55, 57, 59, 60, 62, 65, 67, 69, 70, 72, 74, 77, 79, 81, 83, 86, 88, 90, 92, 94, 97, 99, 101, 103, 107, 109, 111, 112, 116, 118, 120, 124, 126, 127, 129, 133, 135, 136, 140, 142, 143, 145, 149, 150, 152, 155, 157, 159, 162, 163, 165, 167, 170, 171, 173, 176, 177, 178, 180, 183, 184, 185, 188, 189, 190, 192, 194, 195, 196, 198, 200, 201, 202, 203, 204, 206, 207, 208, 209, 211, 212, 213, 214, 215, 216, 218, 219, 219, 220, 221, 222, 223, 224, 225, 226, 227, 227, 228, 229, 229, 230, 231, 232, 232, 233, 234, 234, 235, 236, 236, 237, 238, 238, 239, 239, 240, 241, 241, 242, 242, 243, 244, 244, 245, 245, 245, 246, 247, 247, 248, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 254, 254, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],

g = [0, 0, 1, 2, 2, 3, 5, 5, 6, 7, 8, 8, 10, 11, 11, 12, 13, 15, 15, 16, 17, 18, 18, 19, 21, 22, 22, 23, 24, 26, 26, 27, 28, 29, 31, 31, 32, 33, 34, 35, 35, 37, 38, 39, 40, 41, 43, 44, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 63, 64, 65, 66, 67, 68, 69, 71, 72, 73, 74, 75, 76, 77, 79, 80, 81, 83, 84, 85, 86, 88, 89, 90, 92, 93, 94, 95, 96, 97, 100, 101, 102, 103, 105, 106, 107, 108, 109, 111, 113, 114, 115, 117, 118, 119, 120, 122, 123, 124, 126, 127, 128, 129, 131, 132, 133, 135, 136, 137, 138, 140, 141, 142, 144, 145, 146, 148, 149, 150, 151, 153, 154, 155, 157, 158, 159, 160, 162, 163, 164, 166, 167, 168, 169, 171, 172, 173, 174, 175, 176, 177, 178, 179, 181, 182, 183, 184, 186, 186, 187, 188, 189, 190, 192, 193, 194, 195, 195, 196, 197, 199, 200, 201, 202, 202, 203, 204, 205, 206, 207, 208, 208, 209, 210, 211, 212, 213, 214, 214, 215, 216, 217, 218, 219, 219, 220, 221, 222, 223, 223, 224, 225, 226, 226, 227, 228, 228, 229, 230, 231, 232, 232, 232, 233, 234, 235, 235, 236, 236, 237, 238, 238, 239, 239, 240, 240, 241, 242, 242, 242, 243, 244, 245, 245, 246, 246, 247, 247, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 255],

b = [53, 53, 53, 54, 54, 54, 55, 55, 55, 56, 57, 57, 57, 58, 58, 58, 59, 59, 59, 60, 61, 61, 61, 62, 62, 63, 63, 63, 64, 65, 65, 65, 66, 66, 67, 67, 67, 68, 69, 69, 69, 70, 70, 71, 71, 72, 73, 73, 73, 74, 74, 75, 75, 76, 77, 77, 78, 78, 79, 79, 80, 81, 81, 82, 82, 83, 83, 84, 85, 85, 86, 86, 87, 87, 88, 89, 89, 90, 90, 91, 91, 93, 93, 94, 94, 95, 95, 96, 97, 98, 98, 99, 99, 100, 101, 102, 102, 103, 104, 105, 105, 106, 106, 107, 108, 109, 109, 110, 111, 111, 112, 113, 114, 114, 115, 116, 117, 117, 118, 119, 119, 121, 121, 122, 122, 123, 124, 125, 126, 126, 127, 128, 129, 129, 130, 131, 132, 132, 133, 134, 134, 135, 136, 137, 137, 138, 139, 140, 140, 141, 142, 142, 143, 144, 145, 145, 146, 146, 148, 148, 149, 149, 150, 151, 152, 152, 153, 153, 154, 155, 156, 156, 157, 157, 158, 159, 160, 160, 161, 161, 162, 162, 163, 164, 164, 165, 165, 166, 166, 167, 168, 168, 169, 169, 170, 170, 171, 172, 172, 173, 173, 174, 174, 175, 176, 176, 177, 177, 177, 178, 178, 179, 180, 180, 181, 181, 181, 182, 182, 183, 184, 184, 184, 185, 185, 186, 186, 186, 187, 188, 188, 188, 189, 189, 189, 190, 190, 191, 191, 192, 192, 193, 193, 193, 194, 194, 194, 195, 196, 196, 196, 197, 197, 197, 198, 199];

// noise value

var noise = 20;

function processSepia() {

// get current image data

var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

for (var i=0; i < imageData.data.length; i+=4) {

// change image colors

imageData.data[i] = r[imageData.data[i]];

imageData.data[i+1] = g[imageData.data[i+1]];

imageData.data[i+2] = b[imageData.data[i+2]];

// apply noise

if (noise > 0) {

var noise = Math.round(noise - Math.random() * noise);

for(var j=0; j<3; j++){

var iPN = noise + imageData.data[i+j];

imageData.data[i+j] = (iPN > 255) ? 255 : iPN;

}

// put image data back to context

ctx.putImageData(imageData, 0, 0);

};

$(function () {

// create canvas and context objects

canvas = document.getElementById('source');

ctx = canvas.getContext('2d');

// load source image

imgObj = new Image();

imgObj.onload = function () {

// draw image

ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);

}

imgObj.src = '/web-developer/html/images/pic1.jpg';

// different onclick handlers

var iCur = 1;

$('#next').click(function () {

iCur++;

if (iCur > 6) iCur = 1;

imgObj.src = 'images/pic' + iCur + '.jpg';

});

$('#sepia').click(function () {

processSepia();

});

$('#toImage').click(function () {

$('#img').attr('src', canvas.toDataURL('image/jpeg'));

});

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

Заключение:

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

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

Чтобы иметь возможность добавлять материал в закладки своего личного кабинета, Вам необходимо авторизоваться илизарегистрироваться.

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

↓ Также Вам будет интересно ↓

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

Скрипт JavaScript

Заключение:

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

Зарегистрироваться на сайте:

Карта сайта

Популярные метки

ТОП статьи

Получать уведомления
об обновлениях на сайте!

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

↓ Также Вам будет интересно ↓

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

Скрипт JavaScript

Заключение:

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

Зарегистрироваться на сайте:

Карта сайта

Популярные метки

ТОП статьи

Получать уведомления об обновлениях на сайте!

Получать уведомления
об обновлениях на сайте!