HTML5を試してみた～Canvas API編続き～だじぇ

とうとう買ってしまった・・・。
無線LAN対応の複合機。
贅沢しちゃったよー｡･ﾟ･(ﾉ∀`)･ﾟ･｡
ただインクも一緒に買ったら本体にも付いてきてちょっとorz
予備だと割り切ろう。
これでまたケーブルが一本無くなりました。一緒に財布も軽くなりました。

前回HTML5のCanvas APIをやってみて、すっかりはまってしまったり。
Flexがだいぶ置き去りになってるなぁ･･･。
さて、今回はCanvas APIで画像処理をやってみました。
まあ、自分が知ってる限りの範囲でだけど。Web Workersはまた後回しということで。
やってみたのは「RGBの抽出」「モノクロ」「ぼかし」「モザイク」「アンシャープ」の5つ（処理はかなり適当･･･）。
色の成分を取得してグラフにしようとしたら、折れ線グラフに30000ぐらいプロットしようとしたら途中から描画されなくなってしまった。なんか制限とかありそう。

※当たり前だけどIEでは動きませんよ？

ソースコードは長くなったので、ここには書きません。
キモの部分だけ。
ImageDataという型のオブジェクトがあって、描画コンテキストから作成したり取得したりできます。

var imageData = cx.getImageData(0, 0, canvas.width, canvas.height);

こうすれば今描画されている内容をImageDataで取得できます。
ImageDataにはdataプロパティがあって、これは配列になっています。
中身は色の要素（0～255）。
ImageData.data[0]～ImageData.data[3]は最初の座標の赤、緑、青、アルファチャンネル。
ImageData.data[4]～ImageData.data[7]はその次の座標の赤、緑、青、アルファチャンネル。
といった感じになっています。
これをうまく計算して、最後に描画コンテキストのputImageData関数でImageDataを描画します。

cx.putImageData(imageData, 0, 0);

昔、アプレットで似たことやったんだけど、もうそんなものに頼らないでもいい時代になったのです。
でも久しぶりにやったら、結構疲れた･･･。
次こそはWeb Workersをやってみよう。