JavaScriptで画像処理【1】CANVASの座標と画素 - flandlescarlet's diary【情報工学生の備忘録】

1．はじめに

画像処理といえば大半はC言語やJava等の言語で行うのがほとんどであり、サンプルコードの多くがこれらの言語で実装されています。JavaScriptでも画像処理を行っている記事を見かけますが、ほとんどがグレースケール化、踏み込んでもSobelフィルタなどのエッジ抽出に使われるものだけで、画像処理ライブラリ的なものが現時点では、存在していませんでした。

今回JavaScriptで画像処理のアルゴリズムを実装するにあたってCG-ARTS協会の本を使います。ソースコードは一切かかれていませんが、アルゴリズムを深く理解するうえでは詳しく書かれている本だと思います。

ディジタル画像処理[改訂新版] | 画像情報教育振興協会 |本 | 通販 | Amazon

2．JavaScriptでの画像処理実装方法

JavaScriptで画像処理を行うにあたって、html5で実装されたcanvasを使います。

画像処理の座標系は数学でよくみる座標系と違って、原点の画素が左上から始まります（ループ文の回し方によって原点や読み込む方向が異なるので、本記事では下図のループで回すことにします）。

ここで、注意しないといけないのが、canvasの画素配列は二次元配列ではないということです。写真やイラストなどの2次元データは、canvasで扱うにあたって一次元配列として格納されています。とくに、一次元配列の中身は、赤、緑、青、不透明度の順番に格納されております。

RGBAの各値の範囲は 0 ～ 255 で加法混色の数値をそのまま扱うことができます。Aは画素のアルファ値（不透明度）の意味で 0なら完全に透明、255なら不透明となります。

3．設計

本格的な画像処理を始めるには各画素の操作が必要となるため、canvasの画素配列の理解を深めるためにグラデーション画像を作ります。

サイズは 256x256、canvasの上部から下部にかけて黒→赤になるグラデーションを設計します。

canvasは一次元配列でRGBA、画素をすべて格納すると書きましたが、4x4の画像があったとすると、各配列のパラメータは以下の図のようになっています。

赤の配列に着目すると、{0, 4, 8, ‥‥, 56, 60} と 4の倍数ごとに配列に格納されています。二次元画像で i = 2、j = 3の赤の配列を得たい場合には、( 2 × 4(width) + 3) × 4 とすれば得ることができます。一般的に表すと、( i × width + j ) × 4 で i×j 座標の赤の配列を得ることができます。

残りの緑、青、透明度を表す配列を得るときには、それぞれ、緑+1、青+2、透明度+3 としてやれば、すべての画素データを操作することができるようになります。

黒から赤のグラデーションをかけるので、緑と青の配列は常に0で赤の配列を0から255にかけて増やしていくことで黒から赤へのグラデーションをかけることができます。

縦にグラデーションをかけたいので i軸のみの増分値を赤の配列にそのまま代入することでグラデーションがかけられます。横方向にかけたい場合は j軸の増分値を代入することで横のグラデーションがかかります。

赤から黒にかけてグラデーションをかけたい場合は、255 - i とすることで実装できます。