[HTML5] Canvasの表示内容にフィルターをかける（輝度の調整）

こんにちは、Canvas大好き@yoheiMuneです。
HTML5 Canvasでは表示している内容を1ピクセルずつ取り出して、描画データを編集する事が可能です。
その機能を用いて、表示内容にフィルターをかける処理を少しずつ学習中。 その内容のうち、今日は輝度（明るさ）の調整をブログに書きたいと思います。

HTML5 Canvasでピクセル毎のデータを取得する、更新する

HTML5 Canvasでは、以下のようなプログラムをすることで、1ピクセル毎のR, G, B, A(透明度）を取得することが出来ます。

var canvas  = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");

// getImageDataメソッドを用いることで、
// Canvas上のPixelにアクセスする事ができる
var pixels = context.getImageData(0, 0, width, height);
var d = pixels.data;
for (var i = 0; i < d.length; i+=4) {
    var r = d[i];
    var g = d[i+1];
    var b = d[i+2];
    var a = d[i+3];
}

「getImageData(x, y, width, height)」メソッドを用いてpixelデータを取得し、 pixcelデータ（width, height, dataを持つ）から、rgbaを保持するdataを取得します。
dataプロパティには、「rgbargbargba…」というように、４要素で1ピクセルを表します。

Canvas上のピクセルデータを更新する場合には、以下のように行います。

// 更新したいpixcelデータ
var pixels = /* getImageDataなどで取得して値を変更したpixelデータ*/
context.putImageData(pixels, 0, 0);

「putImageData(imageData, x, y)」メソッドを用いることで、 Canvas上のピクセルを内容を更新することが可能です。

Canvasの上記のメソッドやプロパティの詳細は、以下をご参照ください。
- http://www.w3.org/TR/2dcontext/#dom-context-2d-getimagedata

Canvasに表示した内容の輝度（明るさ）を調整する

輝度を調整する場合には、getImageDataで取得するrgbaのrgbに対して、 同じ値を加算/減算することで輝度を調整することが可能です。
例えば、以下の実装を行うことで、Canvas上に表示した内容の輝度を上げて、明るくすることが出来ます。

// 加算する明るさ。rgbに対してそれぞれ10ずつ加算する。
var diff = 10;

// 1ピクセルずつ処理をする。
// rgbaそれぞれ取得できる値は0から255の間の値。
var pixels = context.getImageData(0, 0, width, height);
var d = pixels.data;
for (var i = 0; i < d.length; i+=4) {
    d[i]   += diff;  // r
    d[i+1] += diff;  // g
    d[i+2] += diff;  // b
}

// 変更後のピクセルデータでCanvas上の内容を上書きする。
context.putImageData(pixels, 0, 0);
}

上記の実装では、固定値しか輝度を変更できませんが、以下のようなスライダーを用いれば、 スライダーの変化に合わせて、輝度を調整することが出来ます。

• 明るさ

最後に

画像に対するフィルターの実装って学習するにも、C言語とか難しめな言語でやる必要がある印象でした。
しかし、HTML5 Canvasという比較的に簡単なプログラムで実現できることでも、 学習できることが分かり嬉しい限りです。

今後も色々なFilterを学び、ブログにアウトプットしたいと思います。

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