HTMLキャンバスgetImageData()メソッド
定義と使用法
getImageData() 方法は ImageData オブジェクトを返し、指定されたキャンバスの矩形のピクセルデータをコピーします。
ImageData オブジェクトの各ピクセルについて、RGBA 値の四つの情報が存在します：
- 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> 要素をサポートしていません。
