例

下のコードは、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);
}

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

定義と用法

getImageData() メソッドは、キャンバスに指定された矩形のピクセルデータをコピーする ImageData オブジェクトを返します。

メソッド
getImageData()	Yes	9.0	Yes	Yes	Yes

注: ImageData オブジェクトは画像ではなく、キャンバス上の一部分（矩形）を指定し、その矩形内の全てのピクセル画素の情報を保持しています。

ImageData オブジェクト内のすべてのピクセルには 4 つの情報（RGBA 値）があります：

R - 赤 (0 ～ 255)
G - 緑 (0 ～ 255)
B - 青 (0 ～ 255)
A - αチェンネル (0 ～ 255；0 は透明で、255 は完全不透明)

色/アルファ情報は配列で、ImageData オブジェクトの data プロパティに格納されています。

チップ: 配列の色/アルファ情報を操作した後で、putImageData() メソッドでキャンバスを戻した（操作する前の配列に戻した）画像データをコピーすることができます。

返された ImageData オブジェクトの最初のピクセルの色/アルファ情報を取得するためのコード：

チップ: キャンバス上の画像のすべてのピクセルの色を反転させる getImageData() メソッドを使用することもできます。

この式を用いて、すべてのピクセルをループし、色の値を変更します：

JavaScript 構文

パラメータの値

JavaScript 構文：	context.getImageData(x,y,width,height);

パラメータ	説明
x	コピーを開始する左上隅の X 座標（ピクセル）
y	コピーを開始する左上隅の y 座標（ピクセル）
width	コピーする矩形領域の幅
height	コピーする矩形領域の高さ

使用する画像：

The Scream

例

キャンバス上の画像の全ピクセルの色を反転させるために 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);