Эффект для изображений с помощью Canvas

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Идея состоит в том, что серая «копия» изображения будет создаваться элементом canvas, а визуальное преобразование при наведении курсора будет выполняться трансформациями CSS3. И так, приступим.

Шаг 1. HTML

Разметка очень простая. Каждый элемент галереи является пунктом неупорядоченного списка.

Эффект для изображений с помощью Canvas | Демонстрация для сайта RUDEBOX

</pre>

<div>Описание картинки</div></li>

<div>Описание картинки</div></li>

<div>Описание картинки</div></li>

</ul>

<span style="color: white;">Фотографии от </span><a href="#" rel="nofollow" target="_blank">Pinkonhead</a></div>

<pre>

Как вы заметили-разметка достаточно простая, по этому более детально на ней останавливаться не стоит, перейдем к следующему шагу.

Шаг 2. CSS

Для начала рассмотрим набор стилей простого сброса:

html, body, div, span, h1, h2, p, a, ul, li, img

{margin: 0; padding: 0;

border: 0; outline: 0;

font-size: 100%;background: transparent;}

ul {list-style: none;}

:focus {outline: 0;}

a {text-decoration:none;}

Мы используем изображения размером 300px x 300px. Основной контейнер #wrap центрируется по высоте (margin: 0 auto) и получает ширину 1020px (=340 x 3). Пункт списка получает свойство float : left и позиционируется относительно.

#wrap {

width: 1020px;

margin: 0 auto;

}

li {

float:left;

position:relative;

display:inline-block;

width:300px;

height:300px;

margin:10px;

padding:10px;

background:#fff;

box-shadow:0 0 5px rgba(0,0,0,.35);

}

li div {

position:absolute;

height:0;

width:280px;

background:rgba(0,0,0,.45);

overflow:hidden;

bottom:10px;

left:10px;

padding: 0 10px;

line-height:50px;

color:#fff;

transition:height 1s;

}

li:hover div {

height:50px;

}

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

Добавим стили для элемента canvas.

canvas {

opacity:1;

position:absolute;

top:10px;

left:10px;

transition:opacity 1s .2s;

}

li:hover canvas {

opacity:0;

}

Шаг 3. Canvas

Теперь приступим к использованию элемента HTML5 canvas, для формирования серой версии изображения.

$(window).load(function() {

$('#gallery img').each(function() {

createCanvas(this);

});

function createCanvas(image) {

var canvas = document.createElement('canvas');

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

// Определяем размер элемента canvas

canvas.width = image.width;

canvas.height = image.height;

// Как только мы получили объект исходного изображения, можно использовать метод drawImage(reference, x, y) для вывода его в элемент canvas.

// x, y - координаты, где должно размещаться изображение.

ctx.drawImage(image, 0, 0);

// Получаем данные изображения и сохраняем его в массиве imageData.

// Данные о точках получаем с помощью метода getImageData().

// Данные включают цвет точки (десятичное, RGB значение) и прозрачность (значение альфа канала).

// Каждый цвет представлен целым значением в диапазоне 0 и 255.

// imageData.da содержит данных объемом (высота x width x 4) байт с индексом в диапазоне от 0 до (высота x ширина x 4)-1.

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

pixelData = imageData.data;

// Цикл по всем точкам в массиве imageData

// и модификация значений цветов.

for (var y = 0; y < canvas.height; y++) {

for (var x = 0; x < canvas.width; x++) {

// Вычисляем индекс нужной точки (x,y):

var i = (y * 4 * canvas.width) + (x * 4);

// Получаем значение RGB.

var red = pixelData[i];

var green = pixelData[i + 1];

var blue = pixelData[i + 2];

// Переводим цвет в серую шкалу. Одна из формул конвертации:

var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11);

pixelData[i] = grayScale;

pixelData[i + 1] = grayScale;

pixelData[i + 2] = grayScale;

}

// Помещаем модифицированные данные imageData обратно в элемент canvas.

ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);

// Вставляем элемент canvas в DOM, перед изображением:

image.parentNode.insertBefore(canvas, image);

}

});

Функция createCanvas создает элемент, получает копию изображения, выполняет конвертацию и выводит результат в элемент canvas, а затем вставляет его в структуру DOM. С помощью метода .each() функция createCanvas выполняет итерации по всем изображениям в списке #gallery.