例
キャンバス上の指定矩形のコピー画素データを以下のコード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);
} »それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| getImageData() | はい | 9.0 | はい | はい | はい |
定義と使用法
getImageData()メソッドは、キャンバス上の指定した矩形のコピーピクセルデータをことのImageDataオブジェクトを返します。
注：のImageDataオブジェクトが画像ではありません、それはキャンバス上の部分（長方形）を指定し、その長方形の中の全ての画素の情報を保持しています。
ImageDataオブジェクト内のすべてのピクセルのための4つの情報、RGBA値があります。
R - （0〜255）赤色
G - （0〜255）カラーグリーン
B - （0〜255）カラーブルー
-アルファチャンネル（0〜255; 0は透明であり、255は完全に見えています）
カラー/アルファ情報は、アレイ内に保持されており、中に格納されdataのImageDataオブジェクトのプロパティ。
ヒント：あなたは、アレイ内のカラー/アルファ情報を操作した後、あなたが戻ってキャンバスに画像データをコピーすることができ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); |
|---|
パラメーター値
| パラメーター | 説明 |
|---|---|
| x | 左上隅のX（ピクセル）座標からコピーを開始します |
| y | 左上隅のy座標（ピクセル単位）座標からコピーを開始します |
| width | あなたがコピーする矩形領域の幅 |
| height | あなたがコピーする矩形領域の高さ |
その他の例
使用するイメージ：
例
使用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); »それを自分で試してみてください