HTML tuvali createImageData() Yöntemi

Örnek

Her pikselin kırmızı olduğu 100*100 piksel ImageData nesnesi oluşturun ve tuvale koyun:

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, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

Tanım ve Kullanım

createImageData() yöntemi, yeni, boş bir ImageData nesnesi oluşturur. Yeni nesnenin piksel değerleri varsayılan olarak şeffaf siyahtı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)

Yani şeffaf siyah şunu gösterir: (0,0,0,0).

Renk/alfa bilgisi bir dizide tutulur ve dizi her piksel için 4 parça bilgi içerdiğinden, dizinin boyutu ImageData nesnesinin boyutunun 4 katıdır: genişlik*yükseklik*4. (Dizin boyutunu bulmanın daha kolay bir yolu, ImageDataObject.data.length kullanmaktır)

Renk/alfa bilgilerini içeren dizi , ImageData nesnesinin data özelliğinde saklanır.

İpucu: Dizideki renk/alfa bilgisini değiştirdikten sonra, putImageData() yöntemiyle görüntü verilerini tuvale geri kopyalayabilirsiniz .

Ö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;

JavaScript Sözdizimi

createImageData() yönteminin iki sürümü vardır:

1. Bu, belirtilen boyutlara (piksel olarak) sahip yeni bir ImageData nesnesi oluşturur:

JavaScript sözdizimi:	var imgData= bağlam .createImageData( genişlik, yükseklik );

2. Bu, otherImageData tarafından belirtilen nesneyle aynı boyutlara sahip yeni bir ImageData nesnesi oluşturur (bu, görüntü verilerini kopyalamaz):

JavaScript syntax:	var imgData=context.createImageData(imageData);

Parametre Değerleri

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

❮ HTML Kanvas Referansı