画像をぼかす処理を実装してみる

動的に追加される画像に対してぼかし処理を入れる機会があったので、その際に調べた画像をぼかす方法をメモしておきます。

ぼかした画像を用意する

1つ目はぼかした画像を用意しておく方法です。
あらかじめ画像を用意できる場合、この方法が簡単です。

HTML

<!-- ぼかす前 -->
<img src="img.jpg" width="480" height="320">

<!-- ぼかした後 -->
<img src="img-blur.jpg" width="480" height="320">

ぼかした画像を用意するデモページ
　

CSSのfilterを使う

2つ目はCSSのfilter: blur();を使う方法ですが、この方法はIEで対応していません。

HTML

<!-- ぼかす前 -->
<img src="img.jpg" width="480" height="320">

<!-- ぼかした後 -->
<img class="css-blur" src="img.jpg" width="480" height="320">

CSS

.css-blur {
	filter: blur(4px);
}

CSSのfilterで対応するデモページ
　

SVGフィルタを使う

3つ目はSVGフィルタを使う方法で、この方法はIEでも対応可能です。

HTML

<!-- ぼかす前 -->
<img src="img.jpg" width="480" height="320">

<!-- ぼかした後 -->
<svg width="480" height="320" viewBox="0 0 480 320">
	<filter id="blur">
		<feGaussianBlur stdDeviation="4">
	</filter>
	<image xlink:href="img.jpg" width="480" height="320" x="0" y="0" filter="url(#blur)">
</svg>

SVGフィルタで対応するデモページ
　

jQueryプラグインを使う

最後はjQueryのプラグインを使う方法で、今回は「background-blur.js」というプラグインを使用してみます。
こちらのページからファイルをダウンロードします。

jQuery本体と合わせてページに読み込ませます。

<script src="background-blur.min.js"></script>

ぼかした画像を追加する要素を用意します。(.blur-wrap)

HTML

<!-- ぼかす前 -->
<img src="img.jpg" width="480" height="320">

<!-- ぼかした後 -->
<div class="blur-wrap"></div>

ぼかした画像を追加する要素に幅と高さを指定しておきます。
この幅と高さで画像が表示されます。

CSS

.blur-wrap {
	display: inline-block;
	width: 480px;
	height: 320px;
}

ぼかした画像を作成します。

JavaScript

$(function() {
	$('.blur-wrap').backgroundBlur({
		imageURL : 'img.jpg',
		blurAmount : 4
	});
});

jQueryプラグインで対応するデモページ

設定できるオプションについてはこちのページに掲載されていますので、必要に応じてご確認ください。