canvas 要素で画像にフィルタを適用したい

ImageData オブジェクトなるものを取得すると、その data プロパティをいじることでピクセルごとに画像をいじることができるらしい。Canvasリファレンス - getImageData/putImageDataメソッド- HTML5.JP を見ればいいわけだけど、結局は data プロパティというのは配列であって、各ピクセルの情報がその要素になっている。そしてその要素の値を変更していくことで画像にフィルタをかけるということを実現しようではないかというのが今回の話。

流れとしては canvas に適当な画像を作り、getImageData メソッドでその画像についての ImageData オブジェクトを取得し、data プロパティをいじり（フィルタ）、その中身が変更された ImageData オブジェクトを putImageData メソッドで canvas に書き出すという感じ。

それなりに大きい画像だと遅すぎてアレだけどね。

実験ページを作ったのでご自由にどうぞ。