画像のモザイク処理を簡単実装マウスオーバーで切り替えも出来る「pixelate.js」

公開日:  最終更新日:2015/06/11

画像のモザイク処理を簡単実装マウスオーバーで切り替えも出来る「pixelate.js」
モザイク処理のイメージ
画像にモザイク処理をする方法は知っている人にとっては簡単なことですが、知らない人にとってはとても難しいことなのではないでしょうか。画像加工ソフトや画像加工してくれるWebサービス等を使えばモザイク処理などすることは可能ですがソフトがなかったり、操作方法がわからなかったりするという方も多いのではと思います。

スポンサードリンク

画像にモザイク処理が出来るjqueryプラグイン「pixelate.js」

モザイクのイメージ
画像にモザイクを掛ける方法といえば、フォトショップなどの画像加工ソフトを使うのが一般的かと思います。でも、画像加工ソフトや操作知識が必要になりますよね。そこで簡単に画像にモザイク処理をしてくれるjqueryプラグインについて調べてみました。

実装方法について「pixelate.min.js」

ダウンロードサイトのイメージ
pixelate.jsのダウンロードより、赤枠のボタンをクリックしてファイルをダウンロードしてください。ダウンロードしたファイルの中から「pixelate.min.js」を使います。
ダウンロードボタンの場所
また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

基本的な実装サンプル

サンプルソース sample1.html

<script src="jquery.min.js" type="text/javascript"></script>
<script src="pixelate.min.js" type="text/javascript"></script>
<img id="myimage" src="画像URL" alt="" />
<script type="text/javascript">
$('img#myimage').pixelate();
</script>

1,2行目でダウンロードしたjquery関連のファイルを読み込んでいます。パスは各自の保存場所に合わせてください。このサンプルは、htmlファイルと同一フォルダにjquery関連のファイルがある状態です。

4行目が画像を記述している部分です。id=”myimage” とidを設定しています。

6行目から8行目がプラグインを実行している部分です。4行目のimgタグのid属性で指定したmyimageを指定してモザイク処理する画像を指定しています。

基本サンプル

マウスオーバーした際にモザイクが消えるようになっています。

データ属性を指定する方法

サンプルソース sample2.html

<script src="jquery.min.js" type="text/javascript"></script>
<script src="pixelate.min.js" type="text/javascript"></script>
<img src="画像URL" alt="" data-pixelate="" />

さきほどの、サンプルでは実行するための記述<script>$(‘img#myimage’).pixelate();</script>でモザイク処理を実行、指定していましたが、imgタグにdata-pixelateの記述をするだけでも同様にモザイク処理をすることが可能です。こちらの記述の方が簡単ですね。

※あくまでスクリプトでモザイク風に画像を見せているだけなので、スクリプトが動かない環境やブラウザによってはモザイク処理がされない可能性もあります。また、表示する元画像は何もしていない状態ですので直接その画像URLで確認すればモザイクのない状態で確認することが出来ます。本当にモザイクをかけて隠したい場合は画像加工ソフトでモザイクをかけてくださいね!


ネットショップの画像にモザイクをかけてどうするんだ・・・ってなるかもしれませんが、マウスオーバー時にモザイク処理が消えて画像を表示することが出来るので、逆に注目を集めるコンテンツとして利用してみるのはいかがでしょうか。見せ方の1つとして覚えておいても良いかもしれません。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑