Canvas getImageData() メソッド
定義と使用方法
getImageData() 方法は、キャンバスの指定された矩形のピクセルデータをコピーした ImageData オブジェクトを返します。
ImageData オブジェクトの各ピクセルには、RGBA値の4つの情報が存在します：
- R - 赤色 (0-255)
- G - 緑色 (0-255)
- B - 蓝色 (0-255)
- A - アルファチャンネル (0-255; 0 は透明で、255 は完全に見える)
color/alpha は配列形式で存在し、ImageData オブジェクトの data 属性を使用して
ヒント：color/alpha の情報を操作した後、 putImageData() 方法は、画像データをキャンバスにコピーします。
例：
以下のコードは、返された ImageData オブジェクトの最初のピクセルの color/alpha 信息を取得します：
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;
（以下の「自分で試してみる」例を参照してください。）
例
例1
以下のコードは、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);
}
ヒント：ページの下部にさらに多くの例があります。
構文
var imgData=context.getImageData(x,y,width,height);
パラメータの値
| パラメータ | 説明 |
|---|---|
| x | コピー開始の左上角のx座標 |
| y | コピー開始の左上角のy座標 |
| width | コピーする矩形エリアの幅 |
| height | コピーする矩形エリアの高さ |
さらに多くの例
例2
使用する画像：
getImageData()を使用して、キャンバス上の画像の各ピクセルの色を反転します。
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// カラーを反転
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);
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。
