canvas要素で任意の座標の色を取得する

既出かもですがさっき気づいたので衝動的にエントリ。

今、canvas要素を使ってお絵かきツールを作ろうと奮闘中なんですが、やっぱりお絵かきするならスポイドツールが欲しい。でもcanvas上の色情報を取得するメソッドなんてないし…と思ってたら、ありました。

getImageData()メソッドです。

具体的な説明はこちら。まあ何をするかというと、このメソッドが返すImageDataオブジェクトの、data属性を直接読みに行っちゃうわけですね。つまりこんな感じ。

var imageData = ctx.getImageData(0, 0, 1, 1);
var red, green, blue, alpha;
red = imageData.data[0]; // 赤
green = imageData.data[1]; // 緑
blue = imageData.data[2]; // 青
alpha = imageData.data[3]; // アルファ値

getImageData()の引数をマウスのクリック座標とかにすれば、スポイドツールの完成です。

ちなみにPhotoShopとかSAIみたいに、実際に画面に表示されている色（アルファブレンド済みの色）を計算する方法はGoogleで検索すると色々出てきますが、分かりやすかったのはこのページ。

• アルファブレンドの高速化

あ、ちなみにこれ、メソッドの実装状況の都合でFirefoxとOpera9.5でしか動きません。まあ私が作ってるツールは、IEもSafariも画像出力できないんでそもそも捨ててるってことで問題ないんですが。もうちょっといろんなブラウザが対応してくれたらいいんですけどねえ…現状だと完全に自己満足です。