Блюр

Дата публикации: 22.11.2011

Задача

Сделать для изображения эффект размытия (блюра).

Решение

В Сети встретил несколько готовых сценариев. Больше всего понравилось решение от мистера Klingemann. Если быть более точным он предлагает несколько решений, но в целом их применение однотипное. Живой пример. Работает в:

  • IE 9
  • Firefox 3.6+
  • Opera 10+
  • Chrome
  • Safari 5

Быстрый старт

Подключаем плагин:

<script src="path-to/superFastBlur.js"></script>

Картинке, к которой будет применен эффект, указываем id. Добавляем в HTML код элемент <canvas> тоже с id.

<canvas id="scene" width="600" height="400"></canvas>
<img src="path-to/img-name.jpg" id="img" width="300" height="225" />

Размеры холст можно указать любые, при отработке плагина они будут заменены на размеры, соответствующие размерам изображения.

Вызываем функцию boxBlurImage, поcле того как требуемое изображение загружено:

function init()
{

	var sourceImageID = "img", // id изображения к которому применяем эффект
		targetCanvasID = "scene", // id холста на котором будет отображено изображение с эффектом
		radiusStart = 30, // радиус размытия
		blurAlphaChannel = false, // добавить ли прозрачность полученному изображению
		iterations = 1; // к-во итераций за которое должен примениться эффект. может использоваться для плавности применения эффекта. больше итераций - больше требуется ресурсов
						
		boxBlurImage( sourceImageID, targetCanvasID, 30, blurAlphaChannel, iterations );
	
}

window.onload = init;

В качестве демонстрации приведу еще два примера:

Хотя все современные браузеры давно заявили о поддержке HTML5 Canvas, практика показала, что эта поддержка в разных браузерах разная. Поэтому плавность смены размытия в некоторых браузерах «летает» (например, firefox 7), а в некоторых кошмарно тормозит (opera 11).

Где качать

Плагин можно скачать на странице разработчика — https://underdestruction.com/2004/02/25/stackblur-2004/. Там же ссылки на другие варианты реализации эффекта размытия.

По теме