HTML5 Canvas×jQuery、グレースケールの画像を自動生成する方法

HTML5 Canvasでグレースケール画像を自動生成

WebDesignerWallにて、HTML5 CanvasとjQueryでグレースケールを実現するチュートリアルが公開されている。画像にマウスを乗せると、グレースケールの画像がカラーになるというものだ。

HTML5 & jQuery Grayscale Demoより。グレースケールの画像にマウスを乗せると、カラーで表示される

これまでこのようなユーザインタフェースを実現するには「カラーの画像」と「グレースケールの画像」の2種類を用意する必要があった。このチュートリアルではHTML5のCanvasを活用し、オリジナルの画像からグレースケールの画像を自動生成する方法を紹介している。ポートフォリオやWebアルバムなど、さまざまな場面で活用できそうだ。

本稿では、その方法を簡単に紹介していこう。

使い方

グレースケールの画像を自動生成したいWebページにおいて、次の4点の修正をおこなう。

jquery.jsをロードする
JavaScriptコードをペーストする
グレースケールにしたい画像をセレクタで選択 (チュートリアルのサンプルでは".item img"となっている)
アニメーションのスピードを調整 (単位はミリ秒。1000=1秒となる)

ここでは次のHTMLファイルを用意した。

HTMLファイル - grayscale_image_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Grayscale Image Test</title> 
<style type="text/css">
<!--
ul.portfolio_snowboard_2011 li
{
    display: inline;
}
-->
</style>
</head>

<body>

<ul class="portfolio_snowboard_2011">
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    <li><img src="4.jpg"></li>
    <li><img src="5.jpg"></li>
    <li><img src="6.jpg"></li>
    <li><img src="7.jpg"></li>
    <li><img src="8.jpg"></li>
    <li><img src="9.jpg"></li>
</ul>

</body>

</html>

HTML5に対応しているWebブラウザでこれを表示してみる。