HTML5 canvas getImageData メソッド
 HTML5 canvas リファレンス
例
50 * 50 の矩形内の各ピクセルの色を青に替えます。
注:ピクセルが赤の所は、ピンク rgba(255,0,255,255) に替ります:
キャンバス
JavaScript:
... ctx.fillStyle="red"; ctx.fillRect(10,10,50,50); var
imgData=ctx.getImageData(30,30,50,50); for (i=0;
i<imgData.width*imgData.height*4;i+=4) { // Do nothing
with the colors red and green, set blue=255, and alpha=255:
imgData.data[i+2]=255; imgData.data[i+3]=255; }
ctx.putImageData(imgData,30,30); ...
定義と用法
getImageDataメソッドは、新しい imageData オブジェクトを作成します。
新しい imageData オブジェクトのすべてのピクセルは、キャンバスの指定部分と同じ rgba 値を持っています。
getImageData メソッドにより、ピクセルの一つ一つを読むことができます。
getImageData メソッドは、キャンバスの矩形を指定する4つのパラメータ（x,y,width,height）を取ります。
imagedata オブジェクトは、画像ではなく、キャンバスの一部（矩形）を指定し、その矩形の内の全てのピクセルの情報を保持します。
mageData オブジェクトの全ピクセルに対して、4種類の情報、rgba 値があります:
1. 赤色 (0-255)
2. 緑色 (0-255)
3. 青色 (0-255)
4. 0が透明で、255が完全表示であるアルファの強度（0-255）
配列に情報が保持されます。配列には、全ピクセルに対して4つの情報が含まれるので、
配列のサイズは矩形のサイズの4倍になります: width * height * 4 。
情報を含む配列は、imageData オブジェクトの .data プロパティに格納されます。
配列内の情報を変更して、putImageData メソッドを使用して、キャンバスの後ろに新しい図面を置くことができます。
チップ:getImageData メソッドで何ができるかは、このページの下部にある例を見てください。
JavaScript 構文
| JavaScript 構文: |
context.getImageData(x,y,width,height); |
imagedata オブジェクト内の最初のピクセルの色情報を取得するための構文は次のとおりです:
imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
red = imgData.data[0];
green= imgData.data[1];
blue = imgData.data[2];
alpha= imgData.data[3];
ブラウザ・サポート
getImageData メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
| パラメータ |
値 |
説明 |
| x |
x-coordinate |
キャンバス内の取得する矩形エリアの x 座標 |
| y |
y-coordinate |
キャンバス内の取得する矩形エリアの y 座標 |
| width |
width |
取得する矩形エリアの幅 |
| height |
height |
T取得する矩形エリアの高さ |
使用法
キャンバスの全ピクセルの色を反転させるために getImageData メソッドを使用することができます。
ここに、画像を含むキャンバスの例があります。全てのピクセルをループし、次の式を使用して色の値を変更します:
red = 255 - old_red
green = 255 - old_green
blue = 255 - old_blue
結果は、キャンバスに反転色で描画されたバージョンです:
例
画像の全ピクセルの色を反転します:
Canvas
JavaScript:
... for (i=0; i<imgData.width*imgData.height*4;i+=4) {
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; }
ctx.putImageData(imgData,0,0); ...
HTML5 canvas リファレンス
|