getImageData()メソッドキャンバスHTML
例
次のコードgetImageData()putImageDataバックキャンバスに画像データ)(ピクセルデータを指定されたキャンバスの長方形にコピーし、:
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);
}
»をお試しください
ブラウザのサポート
Internet Explorer 9の、Firefoxの、オペラ、ChromeとSafariのサポートgetImageData()メソッド。
注:8以前nternet Explorerは、<キャンバス>要素をサポートしていません。
定義と使用法
getImageData()メソッドは、指定された矩形キャンバス画素データのコピーであるのImageDataオブジェクトを返します。
注:のImageDataオブジェクトがキャンバス(長方形)の一部を提供する画像ではなく、各画素の矩形情報内に保存。
各画素についてのImageDataオブジェクト、情報の4分野、すなわちRGBA値があります。
R - 赤(0-255)
G - グリーン(0-255)
B - 青(0-255)
- アルファチャンネル(0〜255; 0は透明で、255は完全に見えています)
配列の形式でカラー/アルファ情報とのImageDataオブジェクトに格納されたデータの特性。
ヒント:操作中の色/アルファ情報の完全な配列は、あなたが使用できるputImageDataを()画像データの方法は、バックキャンバスにコピーされます。
例:
次のコードを得ることができるのImageDataオブジェクトが最初のピクセルの色/アルファ情報に返されます。
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
ヒント:また、キャンバス上の画像の各画素の色を逆にgetImageData()メソッドを使用することができます。
すべての画素を介してこの式を使用して、その色の値を変更します。
green=255-old_green;
blue=255-old_blue;
以下の「お試しください」インスタンスを見てください!
JavaScriptシンタックス
JavaScriptシンタックス: | コンテキスト.getImageData(X、Y、幅、高さ)。 |
---|
パラメータ値
参数 | 描述 |
---|---|
x | 开始复制的左上角位置的 x 坐标(以像素计)。 |
y | 开始复制的左上角位置的 y 坐标(以像素计)。 |
width | 要复制的矩形区域的宽度。 |
height | 要复制的矩形区域的高度。 |
より多くの例
あなたが使用したい画像:
例
キャンバス上の画像の各画素の色を逆にgetImageData()を使用します。
JavaScriptを:
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);
»をお試しください
HTMLキャンバスリファレンスマニュアル