2014/11/07

【jQuery】『pixelate.js』を使って画像にモザイク処理をかける方法

【jQuery】『pixelate.js』を使って画像にモザイク処理をかける方法

Webページ内に表示した画像に,モザイク処理をかけ,マウスオーバーでモザイクを外す機能を付けられるプラグイン『pixelate.js』の使い方を紹介します.

目次

入手方法

https://github.com/43081j/pixelate.jsにアクセスし,ページ右部にある「Download ZIP」をクリックしてダウンロードします.

使用方法

ダウンロードしたZipファイルを解凍した中にある,「pixelate.min.js」という名のファイルを以下のようにjQuery本体とともに読み込みます.

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="pixelate.min.js"></script>

そして,Imgタグを指定してJavaScriptの処理を記述します.

$('img').pixelate();
//もしくは
document.querySelector('img').pixelate();

これで,マウスオーバーのOn/Offに連動するモザイク処理がかかります.

JavaScriptでの処理を記述せずに,以下のようにHTMLタグ内に記述することでも動作させる事ができます.

<img src="test.jpg" width="600" height="400" data-pixelate>

また,以下のようにオプションを指定することも可能です.

<img src="test.jpg" data-pixelate data-value="0.5" data-reveal="true" data-revealonclick="true">
<!-- data-value:モザイクにするピクセルの割合 -->
<!-- data-reveal:マウスオーバーの際にモザイク解除にする -->
<!-- data-revealonclick: クリックするとモザイクを解除したままにする-->

動作サンプル

http://43081j.com/pixelate/に動作サンプルがあります.

まとめ

モザイクを使わなければならない場面というのはそう多くないと思いますが,つい見てしまうものなので,目を引きたいものや,遊び心のあるサイトにしたい場合に使ってみてはいかがでしょうか.