Фильтр для фотографий на WebGL

Пример:

Выбрать другую фотографию для примера:

Для смены фотографий с фильтром и без, используется слайдер "До" и "После"

HTML:

<canvas id="image-filter-canvas"></canvas>

1	<canvas id="image-filter-canvas"></canvas>

CSS:

#image-filter-canvas {
	width: 640px; /* Ширина канваса и соотв. фотографии */
}

#image-filter-canvas {

width: 640px; /* Ширина канваса и соотв. фотографии */

}

JS:

Для реализации этого эффекта используется фильтр WebGLImageFilter. Скачать можно с github или тут

Подключаем его и приведенный ниже код:

(function(){
	var canvas = document.getElementById('image-filter-canvas');
	var ctx = canvas.getContext('2d');
	try {
		var filter = new WebGLImageFilter();
	}
	catch( err ) {
		ctx.fillStyle = '#FFF';
		ctx.fillRect(0,0, canvas.width, canvas.height);
		ctx.fillStyle = '#000';
		ctx.fillText("Браузер не поддерживает WebGL", canvas.width/2, canvas.height/4);
		return;
	}
	var img = new Image();
	img.crossOrigin = "Anonymous";
	img.src = 'photo.jpg' // Фотография
	img.onload = function() {
		canvas.width = img.width;
		canvas.height = img.height;
		filter.reset();
		filter.addFilter("desaturateLuminance");
		filter.addFilter("blur", [2]);
		filter.addFilter("emboss", [0.99]); 
		filter.addFilter("brightness", [0.9]);
		filter.addFilter("sepia", {});
		filter.addFilter("sharpen");
		var filteredImage = filter.apply(img);
		ctx.drawImage(filteredImage,0,0);
	};
})();

(function(){

var canvas = document.getElementById('image-filter-canvas');

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

try {

var filter = new WebGLImageFilter();

}

catch( err ) {

ctx.fillStyle = '#FFF';

ctx.fillRect(0,0, canvas.width, canvas.height);

ctx.fillStyle = '#000';

ctx.fillText("Браузер не поддерживает WebGL", canvas.width/2, canvas.height/4);

return;

}

var img = new Image();

img.crossOrigin = "Anonymous";

img.src = 'photo.jpg' // Фотография

img.onload = function() {

canvas.width = img.width;

canvas.height = img.height;

filter.reset();

filter.addFilter("desaturateLuminance");

filter.addFilter("blur", [2]);

filter.addFilter("emboss", [0.99]);

filter.addFilter("brightness", [0.9]);

filter.addFilter("sepia", {});

filter.addFilter("sharpen");

var filteredImage = filter.apply(img);

ctx.drawImage(filteredImage,0,0);

};

})();

Фильтры:

Основные фильтры:

colorMatrix( matrix ) - применение цветовой матрицы 5x5 (Array[20]), аналогичную Flash's ColorMatrixFilter
convolution( matrix )- применение матрицы свертки 3x3 (Array[9])
blur( size ) - размытие пикселях

Пресеты с использованием основных фильтров:

brightness( amount ) - изменение яркости. 1 увеличивает в 2 раза, -1 уменьшает в 2 раза
saturation( amount ) - изменение насыщения. 1 увеличивает в 2 раза, -1 уменьшает в 2 раза
contrast( amount ) - изменение контраста. 1 увеличивает в 2 раза, -1 уменьшает в 2 раза
negative() - инвертирование цвета
hue( rotation ) - изменение оттенка в градусах 0-360
desaturate() - обесцвечивание изображения одинаково по всем каналам
desaturateLuminance() - обесцвечивание изображения принимая естественное luminace каждого канала
sepia() - цвета сепии
brownie() - старинные цвета
vintagePinhole() - старинные цвета
kodachrome() - старинные цвета
technicolor() - старинные цвета
detectEdges() - обнаружение краев
sobelX() - обнаружение краев с помощью горизонтального оператора Собеля
sobelY() - обнаружение краев с помощью вертикального оператора Собеля
sharpen( amount ) sharpen
emboss( size ) - эффект тиснения с размером в пикселях
polaroid() - эффект поларойдной камеры
shiftToBGR() - переключение цветов с RGB на BGR

TD: 22.08.2019 в 15:17

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

Ответить
- Alexander: 24.08.2019 в 09:58
  
  А если поглядеть с другой стороны?
  Зачем мне фотошоп, когда можно настроить фильтр под стиль сайта, прогонять фотки через него, сохранять и грузить на сайт уже фильтрованные.
  
  Ответить

Пример:

HTML:

CSS:

JS:

Фильтры:

Основные фильтры:

Пресеты с использованием основных фильтров:

Смотрите также:

Сетка из шестиугольников на CSS

Эффективный способ размещения видео с YouTube

Галерея фотографий из ромбиков на CSS

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

Комментарии: