HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas getImageData() メソッド

getImageData()は、キャンバスの指定された領域の隠されたピクセルデータを表すImageDataオブジェクトを返します。この領域は矩形で表され、始点が(sx, sy)、幅がsw、高さがshです。

オンラインサンプル

以下のコードは、getImageData()を使用してキャンバス上の指定された矩形のピクセルデータをコピーし、putImageData()を使用して画像データをキャンバスに戻します：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3">
お使いのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>
<script>
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);
}
</script>
<button　onclick="copy()">コピー</button>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は getImageData() をサポートしています。メソッド。

注意： Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用法

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

注意：ImageData オブジェクトは画像ではありません。キャンバス上の一部（矩形）を定義し、その矩形内の各ピクセルの情報を保存します。

ImageData オブジェクトの各ピクセルには、RGBA値の4つの情報があります：

R - 赤色（0-255）
G - 緑色（0-255）
B - 青色（0-255）
A - alpha チャンネル（0-255; 0 は透明です。255 （完全に見える）

color/alpha インフォメーションは配列形式で存在し、ImageData オブジェクトの data 属性を使用できます。

ヒント：操作が完了した配列の color/alpha インフォメーション以降、 putImageData() メソッドは、画像データをキャンバスにコピーします。

例：

以下のコードは、返された ImageData オブジェクトの最初のピクセルの color を取得します。/alpha インフォメーション：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3">
お使いのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
var　imgData=ctx.getImageData(30,30,50,50);
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
alert(red　+　"　"　+　green　+　"　"　+　blue　+　"　"　+　alpha);
</script>
</body>
</html>

テストを見てみる ‹/›

ヒント：getImageData()メソッドを使用して、キャンバス上の特定の画像の各ピクセルの色を反転させることもできます。

すべてのピクセルを巡回して、色値を変更する公式を使用します：

　　　　　　　　red=255-old_red;
green=255-old_green;
blue=255-old_blue;

JavaScript構文

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

パラメータの値

パラメータ	説明
x	コピーを開始する左上角位置のx座標（ピクセル単位で）。
y	コピーを開始する左上角位置のy座標（ピクセル単位で）。
width	コピーする矩形エリアの幅。
height	コピーする矩形エリアの高さ。

使用する画像：

オンラインサンプル

getImageData()を使用して、キャンバス上の各ピクセルの色を反転させます：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<img　id="scream"　src="views.png">
<canvas　id="myCanvas"　width="300"　height="200"　style="border:1px　solid　#d3d3d3">
お使いのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>
<script>
document.getElementById("scream").onload=function()
{
　　　　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);
　　　　//　色を反転させる
　　　　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);
};
</script>
</body>
</html>

テストを見てみる ‹/›

HTML canvas 参考書

HTML: <template> タグ