HTML tuvali ImageData verileri Özellik

Örnek

Her pikselin kırmızı renge ayarlandığı 100*100 piksel ImageData nesnesi oluşturun:

Tuval

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Property
data	Yes	9.0	Yes	Yes	Yes

Tanım ve Kullanım

data özelliği, belirtilen ImageData nesnesinin görüntü verilerini içeren bir nesne döndürür.

Bir ImageData nesnesindeki her piksel için dört bilgi parçası vardır, RGBA değerleri:

R - Kırmızı renk (0-255 arası)
G - Yeşil renk (0-255 arası)
B - Mavi renk (0-255 arası)
A - Alfa kanalı (0-255 arası; 0 şeffaftır ve 255 tamamen görünür)

Renk/alfa bilgisi bir dizide tutulur ve ImageData nesnesinin data özelliğinde saklanır.

Örnekler:

ImageData nesnesindeki ilk pikseli kırmızı yapmak için sözdizimi:

imgData=ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

ImageData nesnesindeki ikinci pikseli yeşil yapmak için sözdizimi:

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

İpucu: ImageData nesnesi hakkında daha fazla bilgi edinmek için createImageData() , getImageData() ve putImageData() öğelerine bakın.

JavaScript Sözdizimi

JavaScript sözdizimi:	imageData .data;

❮ HTML Kanvas Referansı