HTMLキャンバスgetImageData（）メソッド
例
以下のコードは、getImageData（）を使用してキャンバス上の指定された長方形のピクセルデータをコピーし、次にputImageData（）を使用して画像データをキャンバスに戻します。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
ブラウザのサポート
表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
getImageData（）メソッドは、キャンバス上の指定された長方形のピクセルデータをコピーするImageDataオブジェクトを返します。
注： ImageDataオブジェクトは画像ではなく、キャンバス上のパーツ（長方形）を指定し、その長方形内のすべてのピクセルの情報を保持します。
ImageDataオブジェクトのすべてのピクセルには、RGBA値の4つの情報があります。
R-赤色（0-255から）
G-緑色（0-255から）
B-青色（0-255から）
A-アルファチャネル（0-255から; 0は透明、255は完全に見える）
カラー/アルファ情報は配列に保持され、 ImageDataオブジェクトのdataプロパティに格納されます。
ヒント：配列内の色/アルファ情報を操作した後、 putImageData（）メソッドを使用して画像データをキャンバスにコピーして戻すことができます。
例：
返されたImageDataオブジェクトの最初のピクセルのカラー/アルファ情報を取得するためのコード：
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
ヒント： getImageData（）メソッドを使用して、キャンバス上の画像のすべてのピクセルの色を反転することもできます。
すべてのピクセルをループし、次の式を使用して色の値を変更します。
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
「自分で試してみてください」の例については、以下を参照してください。
JavaScript構文
| JavaScript構文： | context .getImageData（x、y、width、height）; |
|---|
パラメータ値
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
その他の例
使用する画像：
例
getImageData（）を使用して、キャンバス上の画像のすべてのピクセルの色を反転します。
JavaScript：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (var i = 0; i < imgData.data.length; 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);
❮Canvasオブジェクト