Веб-дизайнеру
Веб-разработчику
Дополнительно
HTML5 эффекты изображений – HDR моделирование
Скачать
Демо
Сегодня мы рассмотрим один экспериментальный приём на Canvas HTML5. И мы сделаем хороший HDR (High Dynamic Range) фильтр или эффект для изображений. Мы будем использовать преобразование пикселей с помощью скрипта.
В пример добавлено шесть разных изображений, так что Вы можете оценить этот эффект (там есть 2 кнопки: переключение между изображениями, а также кнопка применения HDR преобразование). Вы можете применить этот эффект несколько раз (нажимать на кнопку), чтобы получить различные вариации, различной глубины и насыщенности. Поэтому, скачивайте исходники на свой компьютер, или пройдите по ссылке “Демо”, и используйте этот эффект.
HTML код. Разметка.
Вначале мы подготовим наш заголовок html документа:
|
1 2 3 4 5 |
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script> google.load("jquery", "1.7.1"); </script> <script src="/web-developer/html/js/script.js"></script> |
Мы подключили JQuery библиотеку (с официального сайта Google), а также наш основной файл скрипта script.js, который и отвечает за работу нашего фильтра HDR.
Далее, в теле нашего документа (после тега body) мы имеем следующий код:
|
1 2 3 4 5 |
<canvas id="source" width="1000" height="600"></canvas> <div class="actions"> <div id="next" class="button">Next image</div> <div id="sepia" class="button">Apply HDR Effect</div> </div> |
Это наш главный код HTML5 Canvas и две кнопки действий (переключение изображения и применение фильтра).
Скрипт JavaScript
Теперь, давайте создадим новый пустой файл script.js и разместим в нем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
// variables var canvas, ctx; var imgObj; function changeSinContrast(par) { var dPow = 4; var iMid = 128; if (par > 0 && par < iMid) { par = Math.sin( Math.PI * ((90-(par/dPow)) / 180)) * par; } else if (par >= iMid) { par = Math.sin( Math.PI * ((90-((256-par))/dPow)/180) ) * par; } return par; } function processHrdEffect() { // get current image data var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); var iMid = 128; var dPow = 3; for (var i=0; i < imageData.data.length; i+=4) { imageData.data[i+0] = changeSinContrast(imageData.data[i+0]); imageData.data[i+1] = changeSinContrast(imageData.data[i+1]); imageData.data[i+2] = changeSinContrast(imageData.data[i+2]); } // 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 () { processHrdEffect(); }); $('#toImage').click(function () { $('#img').attr('src', canvas.toDataURL('image/jpeg')); }); }); |
Как обычно (в подобных скриптах), после того, когда страница загружена, мы создаем canvas и все остальные объекты. После этого скрипт загружает первое изображение, а после – добавляет обработчики событий для нашей кнопки. Когда мы нажимаем на кнопку "Применить HDR эффект кнопку", вызывается функция processHrdEffect. Затем скрипт перебирает все пиксели изображения и меняет их значения.
Обратите внимание, что он использует функцию "sin". Это означает, что он изменяет контрастность пикселей среднего диапазона. Это означает, что все яркие места изображения станут более легкими, и темные – более темными. Это и есть эффект HDR моделирования. Думаю, этот эффект будет Вам полезен 
.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
