Hatena::Groupjavascript

JavaScriptで遊ぶよ

 | 

2009-05-12

canvasのgetImageDataでピクセルの色を取得する

01:14

以下は古い仕様です。現在は createImageData メソッドで ImageData オブジェクトを作らなければいけません。

putImageDataメソッドは、引数 image に指定された ImageData構造を取り込み、引数 dx, dy で指定されたcanvas座標空間上の地点に、それを描画します。描画の際には、ImageData構造で表される各ピクセルをデバイスピクセルにマッピングします。

このメソッドの第一引数が、 [[Class]] プロパティが ImageData であるオブジェクトでないが、次に挙げるすべての条件を満たす場合は、このメソッドは第一引数を ImageDataオブジェクトだったかのように扱います。(そのため、TYPE_MISMATCH_ERR 例外は発生しません。)

Canvasリファレンス - getImageData/putImageDataメソッド- HTML5.JP

The CanvasPixelArray object provides ordered, indexed access to the color components of each pixel of the image data. The data must be represented in left-to-right order, row by row top to bottom, starting with the top left, with each pixel's red, green, blue, and alpha components being given in that order for each pixel. Each component of each device pixel represented in this array must be in the range 0..255, representing the 8 bit value for that component. The components must be assigned consecutive indices starting with 0 for the top left pixel's red component.

4.8.11 The canvas element — HTML 5

強調は引用者。



var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

var image = ctx.getImageData(45, 45, 1, 1);  // 1px by 1px のデータを取得
alert(image.data);  
// => [object CanvasPixelArray]
alert( Array.prototype.slice.apply(image.data); );
// => 192,80,77,177

Pixel ごとの RGBA 値が取得できる。

CanvasPixelArray は Array ではないので、slice 等のメソッドは無い。


getImageData は Safari 3 では使えないらしいが Safari 4 Beta では使える。Chrome も手元の Chromium 2.0.181.0 だと使えた。


あんま関係ないけど

上のを使ってカラーピッカーできるなーと思ったんだけど、jQuery の farbastic というやつがあるらしく、これは輪型のカラーパレットと透過 png のマスクを使っていた。

f:id:edvakf:20090513033212p:image f:id:edvakf:20090513033224p:image

これがなかなかよくできているので、カラーピッカーはもういいかも。

 |