画像の輝度と彩度を変えるJavaScriptライブラリを公開しました(Canvas用)

画像の輝度と彩度を変えるJavaScriptライブラリ JS-Image-Filters-ddn をGithubにて公開しました。
Github Pagesでデモを公開しています。
また、このライブラリを使用したWebサービス「写真明るさ補正」を公開しています。

デモページのスナップショット

ddnを作るにあたって、JavaScriptで画像をリサイズする JS-Image-Resizer をベースにさせていただきました。
メソッドのインターフェイスも JS-Image-Resizer に近いものにしました。
既に JS-Image-Resizer を使っている方は、使い方が理解しやすいかと思います。

まだ追加したい機能もあるのですが(ワーカースレッド実装・画像変換アルゴリズムの選択肢など)、JavaScriptで画像の輝度・彩度を操作するには十分かと思います。

使い方

詳しい使い方は、Githubで直接 JS-Image-Filters-ddn サンプルページのコードを見ていただければわかると思います。

大まかな流れとしては、
 ソース画像ファイル
 ->Imageオブジェクト
 ->Canvasハンドル+Canvasコンテキストハンドル
 ->ImageDate(縦横サイズ+ピクセル情報）
 ->ImageDateのdata配列(ピクセル情報)
と変換してから本ライブラリにピクセル情報を操作させて、
 ->変換済みdata(ピクセル情報)
 ->ImageDate(縦横サイズ+ピクセル情報）
 ->ImageDateをCanvasに描画
となります。

ここでは本ライブラリの引数について解説します。
例としてBrightness(輝度)を紹介していますが、Chroma(彩度) も基本的には同じです。
 

本機能のオブジェクトを作成

obj_brightness = new Brightness(

image.width, image.height, true, '', 0, true,

function(buffer){ cb_my_rewrite(buffer); });

引数： ソース画像のwidth, ソース画像のheight, ソース画像のアルファチャンネルの有無, 変換アルゴリズムの指定, 変換の重み付け, ワーカー使用の有無, コールバック関数

「ソース画像のwidth, ソース画像のheight, ソース画像のアルファチャンネルの有無」
で、ソース画像の情報をbrightness機能に伝えます。

「変換アルゴリズム」
は、無指定ではデフォルトの関数を使用します。今のところひとつしか搭載されていないので、選択肢はありません。

「変換の重み付け」
変換の強さを制御します。
値は -100 ~ 0 ~ +100までです。
Brightnessでは、-100が最も暗く、+100で最も明るくなります 。

「コールバック関数」
変換終了後に呼び出される関数を指定します。
変換済み画像情報が、配列bufferとして、コールバック関数の引数に渡されます。
通常は、画面再描画の関数を登録します。

画像操作の実行

obj_brightness.brightness(dataToBrightness, value);

引数： ソース画像のピクセル情報の配列， 変換の重み付け(オプション)

「ソース画像のピクセル情報の配列」
変換ソース画像を渡します。
各ピクセルの色データがRGBA(またはRGB)順に並んでいるだけの、単純な1次元配列です。
Canvasコンテキストのdata形式です。
例えば以下のようにして、画像を持っているCanvasから取得することができます。

var dataToBrightness = h_Canvas_context.getImageData(0, 0, image.width, image.height).data;

「変換の重み付け(オプション)」
変換の強さを制御します。
値は -100 ~ 0 ~ +100までです。
この引数は省略することができます。省略した場合、オブジェクト生成時に指定したデフォルト値が使用されます。

TIPS: 元画像データ用に表示されないCanvasを用意する

加工した画像だけ表示すればよく、元画像のデータは持っていてもブラウザ上に表示する必要はない場合があると思います。
ページのHTMLに書きこんでhiddenなどで隠すこともできますが、JavaScript側だけで使うCanvasをHTMLに持たせるのはあまり好ましいとは思えません。
下記の方法により、ページ上に存在しないCanvasをJavaScriptで作成することができます。

//src_canvas = document.getElementById('source_canvas');
src_canvas = document.createElement('canvas');
src_ctx = src_canvas.getContext('2d');