fc2ブログ

HTML5 ImageData

2011-06-30 | 10:58


red/green/blueのチェックボックスのoffで画像のRGBそれぞれの要素の値を0にしています。
(Chromeでのみ動作確認済み。フレームになっているのでソースコードはフレームのソースを参照してください)

ポイント
- キャンバスのコンテキストに対するgetImageDataでイメージデータ(ピクセル単位のデータ)が取得できる。(画像から直接イメージデータは取得できないので、一旦キャンバスに描画する必要がある)
- イメージデータには各ピクセルごとにR/G/B/Alphaの情報が並んでいる。
- putImageDataでキャンバスにイメージデータを描画できる。

落とし穴
外部オリジンの画像に対してgetImageData()を行うとSECURITY_ERRが発生する。これはローカルの画像に対して実行した場合(開発時にローカルのhtmlファイルを直接ブラウザで開いて確認しようとした場合等)も発生するので注意が必要.