Фотогалерея для сайта с использованием HTML5 Canvas

Здравствуйте уважаемые читатели XoZblogа! В этом уроке мы создадим фотогалерею для сайта с использованием HTML5 Canvas и CSS3. Смотрите демо-версию, чтобы оценить эффект при наведении на изображение. Оттенки серой «копии» основного изображения создаются с помощью Canvas, а также с CSS3 для плавного изменения «копии» на основное изображение. Советую также ознакомиться с уроком Галерея изображений на jQuery. Коротко о том, что такое Canvas. Спецификация HTML5 включает множество новых тегов, одним из которых является canvas. HTML5 Canvas — предоставляет простой и хороший способ работы с графикой и рисованием с использованием JavaScript. Следует также знать, что рисование ведется в растровой форме, таким образом, нарисовав на Canvas какую-либо фигуру, её нельзя будет редактировать или удалить отдельно, можно только стереть целую область Canvas.

Шаг 1: HTML разметка

Давайте начнем с простой HTML разметки, каждый элемент (Изображение) галереи является элементом маркированного списка.

<div id="wrap">
<h1>Фотогалерея</h1>
    <ul id="gallery">
       <li><a href="#"><img src="images/flo1.jpg"><div>Весенние цветы 1</div></a></li>
       <li><a href="#"><img src="images/lights2.jpg"><div>Городские огни 1</div></a></li>
       <li><a href="#"><img src="images/flo3.jpg"><div>Весенние цветы 2</div></a></li>
       <li><a href="#"><img src="images/lights1.jpg"><div>Городские огни 2</div></a></li>
       <li><a href="#"><img src="images/flo2.jpg"><div>Весенние цветы 3</div></a></li>
       <li><a href="#"><img src="images/lights3.jpg"><div>Городские огни 3</div></a></li>
    </ul>
</div>

Шаг 2: Стили CSS

Мы будем использовать изображение 300px на 300px. Элемент списка, которым является изображение в фотогалерее, принимает значение left для свойства float и позицию relative. Название изображения, завернутый в DIV элемент, который скользит вверх при наведении курсора мыши. Для достижения плавного эффекта появления названия, мы применяем CSS3.
(Все файлы данного урока Вы сможете скачать одним архивом «Исходники» — кнопка выше).

/* Стили для фотогалереи */
#wrap {width: 1020px; margin: 0 auto;}
h1 {font-size:3em;margin:0 0 20px 20px;text-shadow:0 1px 0 #fff;}
/* Стили для каждого элемента маркированного списка */
li {
   float:left;
   position:relative;
   display:inline-block;
   width:300px;
   height:300px;
   margin:10px;
   padding:10px;
   background:#fff;
   -webkit-box-shadow:0 0 5px rgba(0,0,0,.35);
   -moz-boz-shadow: 0 0 5px rgba(0,0,0,.35);
   box-shadow:0 0 5px rgba(0,0,0,.35);
}
/* Стили для блока DIV в котором находится название изображения */
li div {
   position:absolute;
   height:0; width:280px;
   background:rgba(0,0,0,.45);
   overflow:hidden;
   bottom:10px;
   left:10px;
   padding: 0 10px;
   -webkit-transition:height 1s;
   -moz-transition:height 1s;
   -o-transition:height 1s;
   -ms-transition:height 1s;
   transition:height 1s;
   color:#fff;
   line-height:50px;
   font-size:1.2em;
}
li:hover div {height:50px;}

Шаг 3: Canvas

Теперь мы будем использовать элемент HTML5 Canvas для рисования оттенков серой версии нашего изображения. Внизу вы найдете createCanvas пользовательские функции, которые создают Canvas элемент, делают копию изображения, выполняют преобразование и выводят его на холст и, наконец, вставляют холст в DOM дерево документа. С помощью .each() метода функция createCanvas повторяется для всех изображений в списке галереи.

   $(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.width = image.width;
         canvas.height = image.height;

         // Как только мы получим ссылку на объект исходного изображения, мы можем использовать DrawImage(ссылка, х, у), чтобы сделать ее Canvas.
        // х, у являются координатами на целевом холсте, куда изображение должно быть помещено.
         ctx.drawImage(image, 0, 0);
         // Принимаем данные изображения и храним их в массиве ImageData. Вы можете узнать данные Канвас с помощью метода getImageData (). Данные изображения включают в себя цвет пикселя (в десятичной системе, RGB значения) и прозрачности (альфа-значение). Каждый цветовой компонент представляет целое число от 0 до 255. imageData.data содержит высота y ширина х 4 байта данных, с индексом в диапазоне от 0 до (высота y ширина х 4) -1.
         var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
             pixelData = imageData.data;

         // Цикл по всем пикселям в массиве ImageData, RGB знаяения цвета.
         for (var y = 0; y < canvas.height; y++) {
           for (var x = 0; x < canvas.width; x++) {
             // Вы можете получить доступ к цвету значения (х, у) пикселя следующим образом:
             var i = (y * 4 * canvas.width) + (x * 4);
             // Получить RGB значения.
             var red = pixelData[i];
             var green = pixelData[i + 1];
             var blue = pixelData[i + 2];
             //  Преобразовать в оттенки серого. Одна из формул преобразования (например, вы могли бы попробовать простой средней (красный + зеленый + синий) / 3)  
             var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11);
             pixelData[i] = grayScale;
             pixelData[i + 1] = grayScale;
             pixelData[i + 2] = grayScale;
           }
         }

         // Ввод изменений ImageData обратно на холст.
         ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
         // Установка полотна в DOM:
         image.parentNode.insertBefore(canvas, image);
       }
     }
   });

Шаг 4: Стили для Canvas

Давайте рассмотрим стили для настройки работы Canvas. Определим, что происходит по умолчанию и при наведении курсора мыши:

canvas {
   opacity:1;
   position:absolute;
   top:10px;
   left:10px;
   -webkit-transition:opacity 1s .2s;
   -moz-transition:opacity 1s .2s;
   -o-transition:opacity 1s .2s;
   -ms-transition:opacity 1s .2s;
   transition:opacity 1s .2s;
}
li:hover canvas {opacity:0;}

Вот и все готово! Эта фотогалерея не будет работать в версиях Internet Explorer ниже 9. Вы могли бы сделать альтернативные решения с использованием оттенков серого фильтра и добавить некоторые JQuery эффекты, применяемые при наведении курсора мыши. Также хочу добавить, что фотогалерея работает только на сервере (в том числе и локальном).

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или следите за мной в Twitter. Не забывайте оставлять комментарии к статьям и урокам. Если урок Вам понравился и пригодился сделайте tweet или like — тем самым Вы выразите свою благодарность. До связи!

P.S.: Все о работе в интернете на блоге http://kartashenkov.ru/

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

  • Интересно какие браузеры уже поддерживают HTML5. WordPress тоже поддерживает стандарты HTML5? С какой версии, если поддерживает?

    • Дмитрий Кочетов

      Что касается браузеров то последние версии Chrome и Safari практически полноценно поддерживают HTML5 чуть хуже FF и Opera, эксплорер конешно как всегда) в догоняющих даже 9я версия не особо радует… вот здесь очень подробная инфа по этому вопросу! А в WordPress с версии 3.0 уже дефолтная тема twenty eleven поддерживает html5 и css3.

    • Mlv63

       А как наполнить галерею фотографиями?

    • Как в шаге 1. Добавляется сколько нужно элементов списка ( … ), внутри гиперссылка (а) и тег изображение (img) с путем (src) до картинки. Все

  • Zhibko Kostya

    А можно галерею в галереи?

    • Здравствуйте! не совсем понял вопрос!

    • Sergey

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

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

  • Kamunizime

    а можно сделать что бы картинки по ссылке открывались в всплывающем окне и с возможностью перехода на следующее изображение?

    • Да можно! в сети много таких скриптов, но наверно самый популярный LIGHTBOX2. Как подключать там описано. Если вдруг возникнут вопросы пишите) Вот что у меня получилось:

    • Nik

       Можешь подробно написать как подключить, по ссылке инглиш

    • у вас сайт самописный или cms (WordPress, joomla и тд)? 

  • volva

    Подскажите куда вписывается (Шаг3: Canavas ) ?

    • Здравствуйте. Вы исходнике скачайте там все есть. А вообще в отдельный .js файл

  • Pingback: Скрипт Chart.js. Создание анимированных диаграмм | Блог Сергея Кривцова()