[HTML5] Canvasの表示内容にフィルターをかける（グレースケース、ネガポジ反転）

こんにちは、@yoheiMuneです。
前回に引き続き今回は、HTML5 Canvasを用いた画像フィルターの第２弾として、 グレースケールとネガポジ反転のやり方をブログに書きたいと思います。

Canvasで画像フィルターをかける

HTMl5 Canvasでは、表示してるビットマップデータにJavaScriptからアクセスすることが出来ます。
そのビットマップ値を変更することで、表示内容に画像フィルターなどの変化を与えることが出来ます。

画像フィルターシリーズのブログ記事では、その機能を用いて表示している画像にフィルターをかける方法を、 ライブラリなしに計算式や考え方を示しながら、実装内容を紹介しています。

以下は、画像フィルターシリーズの他のブログ記事です。参考になれば幸いです。
- HTML5 Canvasで表示内容にフィルターをかける（輝度）＠YoheiM.NET

表示内容を白黒表示（グレースケール）にする

表示内容を白黒表示にするには、一つのピクセル上のR,G,Bの値を同一にすることで、 白/灰色/黒といった色味のないグレースケールにすることが出来ます。
R,G,Bのどの色の値に合わせても良いのですが、以下の式から算出される値を利用することで、 見慣れたグレースケールに出来るようです。

value = red * 0.2126 + green * 0.7152 + blue * 0.0722

上記の計算式を用いて、ビットマップのデータを変更するとグレースケールにすることが出来ます。
具体的な実装は以下の感じです。

// 対象のCanvasを取得し、contextも取得する。
var canvas  = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");

// Canvasから描画内容を保持するimageDataを取得する。
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

// 描画内容に対して、上記のグレースケールにする式を当てはめながら
// rgbの値を計算する。
var d = imageData.data;
for (var i = 0; i < d.length; i+=4) {
     var g = d[i] * 0.2126 + d[i+1] * 0.7152 + d[i+2] * 0.0722;
     d[i] = d[i+1] = d[i+2] = g;
    // d[i+3]に格納されたα値は変更しない
}

// 計算結果でCanvasの表示内容を更新する。
context.putImageData(imageData, 0, 0);

上記の実装結果が以下のようになります。

ネガ反転のFilterを作成する

ネガ反転をするFilterの場合、白を黒、黒を白にするようにrgbの値を計算すればできます。
具体的には、以下のような計算を行います。

r = 255 - r;
g = 255 - g;
b = 255 - b;

上記の計算の場合、白（r,g,b=0,0,0）の場合は、黒（r,g,b=255,255,255）となります。

上記の計算式を用いて、ビットマップ値を計算する実装は以下となります。

// 対象のCanvasを取得し、contextも取得する。
var canvas  = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");

// Canvasから描画内容を保持するimageDataを取得する。
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

// 描画内容に対して、上記のグレースケールにする式を当てはめながら
// rgbの値を計算する。
var d = imageData.data;
for (var i = 0; i < d.length; i+=4) {
    d[i] = 255 - d[i];
    d[i+1] = 255 - d[i+1];
    d[i+2] = 255 - d[i+2];
    // d[i+3]に格納されたα値は変更しない
}

// 計算結果でCanvasの表示内容を更新する。
context.putImageData(imageData, 0, 0);

上記の実装結果は、以下のように実行することが出来ます。

参考資料

画像Filterの考え方は、以下の資料を参考にしています。ありがとうございます(＾ｰ^)ノ
- 画像処理におけるアルゴリズム

最後に

画像Filterって学んでみたいとずっと思ってたんです。その願いが少しかなって良かったです。
でも調べていくと、バリバリ数学なところも出てきて、数学をちゃんと学ばなきゃなぁと思う今日この頃。
図書館とかで数学の本を色々と借りて読もうと思ってます。

最後までご覧頂きましてありがとうございました。