В статье приведено решение, которое позволяет создать для изображений эффект размытия. Это осуществляется благодаря плагину от автора Klingemann. Также в статье приводится пример установки плагина.

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

В сети присутствует достаточно много способов реализации данной задачи, однако наше внимание привлек скрипт от автора Klingemann. Его скрипт достаточно прост в эксплуатации и показывает высокие показатели кроссбраузерности. Также стоит отметить, что на ресурсе автора приведены несколько приемов обработки изображений, но сегодня мы рассмотрим именно размывание.

Установка и настройка

Как обычно, установка плагина начинается со скачивания библиотек jquery и непосредственно самого плагина. Все это, как упоминалось ранее, можно найти на сайте автора (в качестве библиотеки подойдет любая версия jquery, в данном случае будет использоваться версия 1.7.2).

После этого необходимо программно подключить код наших файлов к основному документу. Для этого в тег head нужно вписать следующие строки

HTML

  <script type="text/javascript" src="superFastBlur/jquery-1.7.2.min.js"></script>
  <script src="superFastBlur/superFastBlur.js"></script>

Далее переходим к основному коду, где будет вставлена наша картинка. Для вывода конечного варианта картинки необходимо задействовать тег canvas. Он сыграет роль экрана для конечного результата. Помимо этого, наш экран должен иметь идентификатор, на который будет ссылаться скрипт при активации. Также нужна будет и сама картинка, то есть ее изначальный вариант. Ей тоже необходимо присвоить уникальный идентификатор для корректной работы скрипта. Ниже показан пример кода, который должен находиться в определенном месте внутри body

HTML

<img src="city8.png" id="blur" />
<canvas id="screen"></canvas>

Далее нам нужно инициализировать наш скрипт, кроме того необходимо в функции boxBlurImage прописать требуемые команды для достижения требуемого эффекта размытия. Ниже приведен скрипт с пояснениями некоторых таких команд

JavaScript

<script type="text/javascript">
	  function init()
	{
 
		var sourceImageID = "blur", // идентификатор картинки, которую нужно размыть
			targetCanvasID = "screen", // идентификатор экрана, на котором
                                                                 // будет выводится результат
			radiusStart = 15, // степень размытия
			blurAlphaChannel = false, // отменяет прозрачность полученной картинки
			iterations = 1; // число итераций 
 
			boxBlurImage( sourceImageID, targetCanvasID, 15, blurAlphaChannel, iterations );
 
	}
 
	window.onload = init;
  </script>

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

Подводя итог

В завершении требуется отметить простоту работы плагина и минимум усилий и ресурсов, которые затрачиваются для его работы. Также необходимо отметить особенности работы HTML5 Canvas в разных браузерах. Тут привлекает внимание параметр степени размытия. К примеру, в Firefox эффект размытия стремительно увеличивается при незначительном увеличении значения команды radiusStart, а вот в Оpera размытие изменяется менее стремительно при повышении значения.