Basically, we’re a small design agency located in Montreal, Canada.

HTML5 Canvas Image Effects: Black & White - SpyreStudiosにおいて、HTML5のCanvas機能を使って画像を読み込み、さらにその画像を白黒画像に変換して表示する方法が紹介されている。Canvasを使ってどのように画像加工処理を実施するかのテンプレートとして参考になる。

紹介されている機能はソースコードを見るとわかりやすい。次に、HTML5 Canvas Image Effects: Black & Whiteで紹介されているコードを参考にサンプルとして実行しやすくしたものを掲載する。HTMLファイルと同じフォルダに、コードの下に掲載した画像のリンク先に表示される元画像をbeer.jpgファイルとして置いておけばいい。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTML5 Canvas black and white effect demo</title>
</head>
<body>
  <img id="image-beer" src="beer.jpg" alt="Beer!" />
  <canvas id="canvas" height="480" width="360" ></canvas>
  <script type="text/javascript">
    window.onload = function() {
      var context = document.getElementById("canvas").getContext("2d");
      var image = document.getElementById("image-beer");
      context.drawImage(image, 0, 0);


      var imgd = context.getImageData(0, 0, 360, 480);
      var pix = imgd.data;
      for (var i = 0, n = pix.length; i < n; i += 4) {
        var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
        pix[i  ] = grayscale; // 赤
        pix[i+1] = grayscale; // 緑
        pix[i+2] = grayscale; // 青
        // アルファ
      }
      context.putImageData(imgd, 0, 0);
    };
  </script>
</body>
</html>

変換元の画像データ

Canvas機能の紹介は2つの工程にわかれている。まず、画像を読み込んでCanvasに出力するフェーズ、もうひとつは出力した画像に対して白黒化の加工を実施するフェーズだ。画像の読み込みはシンプルだ。CanvasからgetContext("2d")して持ってきたコンテキストオブジェクトに、img要素オブジェクトを渡してdrawImageすればいい。

ポイントは白黒化の加工を行う部分にある。Canvasコンテキストに対してgetImageDataを実施すると、配列データが返ってくる。1ピクセルは4つのデータで構成されており、最初から順に赤、緑、青、アルファのデータが入っている。この値を加工して、Canvasコンテキストに対してputImageDataで描画を実施すれば、加工後のデータが描画される仕組みになっている。

画像の読み込みと白黒加工。左は元画像、右は加工後の画像

HTML5 Canvas Image Effects: Black & Whiteではカラーから白黒へデータを変換する方法に「赤 * 0.3 + 緑 * 0.59 + 青 * 0.11」という緑強めで青を弱めにする人間向けの補正が入った公式を採用している。この公式で変換することで人間が白黒として認識しやすいデータへ置き換わっている。

HTML5 Canvas Image Effects: Black & Whiteで紹介されているこの処理は、シンプルでわかりやすく、Canvasを画像のフィルタ処理目的で使う場合のテンプレートとして参考になる。同様の処理はSVGのフィルタでも実施できるが、Canvasでは自分の目的に合った処理を直接開発できるという特徴がある。