HTML5 Эффекты изображений - HDR моделирование

Сегодня я хотел бы вернуться к нашим экспериментам с HTML5 Canvas. Подготовим хороший HDR (High Dynamic Range) фильтр для изображений. Мы будем использовать методику преобразование пикселей. У нас есть шесть различных изображений. Вы можете применить этот эффект несколько раз, чтобы получить более глубокий эффект.

Сложность

css hdr фильтр

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

В начале, подготовим чистый HTML-документ, со следующим кодов в head:

<script type="text/javascript"  src="https://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.7.1");
</script>
<script src="/js/script.js"></script>

Здесь мы добавили библиотеки JQuery (с помощью Google библиотек) и наш главный скриптов script.js, в котором находится необходимый JS код будущего HDR фильтра. Перейдем к телу документа:

index.html

<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>

Добавили главный объект HTML canvas и две кнопки управления (для переключения изображения и применения фильтра).

Шаг 2. JS

Далее создадим новый файл script.js в папке JS со следующим содержимым:

// переменные
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() {
// получение данных текущего изображения
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]);
}
ctx.putImageData(imageData, 0, 0);
}; $(function () { // создание элемента canvas и дополнительных объектов
canvas = document.getElementById('source');
ctx = canvas.getContext('2d'); // загрузка изображения
imgObj = new Image();
imgObj.onload = function () { // изменение изображения
ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
}
imgObj.src = 'images/pic1.jpg'; // обработчик onclick
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'));
});
});

Как обычно (в подобных скриптах), после загрузки страницы, создаем объект HTML canvas. После этого скрипт загружает первое изображение, затем - добавляет обработчики событий для кнопки. При нажатии на кнопку "Применить HDR эффект", происходит вызов функции processHrdEffect. Затем скрипт перебирает все пиксели. Обратите внимание, что мы используем функцию "sin", которая меняет контраст пикселей среднего диапазона, т.е. все источники света станут более светлые, а темные источники станут еще темнее, это и есть - HDR моделирование.

Перевод статьи HTML5 Image Effects – HDR simulation

Тэги: HDRфильтрcanvas

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.