ImageData
オブジェクトなるものを取得すると、その data
プロパティをいじることでピクセルごとに画像をいじることができるらしい。Canvasリファレンス - getImageData/putImageDataメソッド- HTML5.JP を見ればいいわけだけど、結局は data
プロパティというのは配列であって、各ピクセルの情報がその要素になっている。そしてその要素の値を変更していくことで画像にフィルタをかけるということを実現しようではないかというのが今回の話。
流れとしては canvas に適当な画像を作り、getImageData
メソッドでその画像についての ImageData
オブジェクトを取得し、data
プロパティをいじり(フィルタ)、その中身が変更された ImageData
オブジェクトを putImageData
メソッドで canvas に書き出すという感じ。
それなりに大きい画像だと遅すぎてアレだけどね。
実験ページを作ったのでご自由にどうぞ。