Örnek
Bir oluşturma 100*100 her piksel kırmızı piksel ImageData nesnesi ve tuval üzerine koydu:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var 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); Kendin dene " Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.
| Yöntem | |||||
|---|---|---|---|---|---|
| createImageData() | Evet | 9.0 | Evet | Evet | Evet |
Tanımı ve Kullanımı
createImageData() metodu yeni, boş bir ImageData nesne oluşturur. Yeni nesnenin piksel değerleri varsayılan olarak şeffaf siyah.
Bir ImageData nesnesindeki her piksel için bilgi, RGBA değerleri dört adet vardır:
R - kırmızı renk (from 0-255)
G - yeşil renk (from 0-255)
B - mavi renk (from 0-255)
A - alfa kanalı (from 0-255; 0 is transparent and 255 is fully visible)
Yani, şeffaf siyah gösterir: (0,0,0,0) .
Renk / alfa bilgiler bir dizi içinde tutulur ve dizi, her piksel için bilgi 4 parça içerir, çünkü dizinin büyüklüğü ImageData nesnesinin 4 kez boyutu: genişlik x yükseklik * 4. (Dizinin büyüklüğü bulmak için daha kolay bir yolu, ImageDataObject.data.length kullanmaktır)
Renk / alfa bilgilerini içeren dizi depolanan data ImageData nesnesinin özelliği.
Tip: Eğer dizideki renk / alfa bilgi manipüle sonra, tuvale üzerine geri görüntü verilerini kopyalayabilirsiniz putImageData() yöntemiyle.
Examples:
ImageData ilk pikseli yapmak için sözdizimi kırmızı nesne:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;ImageData nesne yeşil ikinci pikseli 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
Iki sürümü vardır createImageData() yöntemiyle:
1. Bu (piksel) belirtilen boyutlara sahip yeni ImageData nesnesi yaratır:
| JavaScript sözdizimi: | var imgData= context . createImageData( width,height ) ; |
|---|
2. Bu anotherImageData tarafından belirlenen nesne olarak aynı boyutlara sahip bir yeni ImageData nesnesi yaratır (this does not copy the image data) :
| JavaScript sözdizimi: | var imgData= context . createImageData( imageData ) ; |
|---|
Parametre Değerleri
| Parametre | Açıklama |
|---|---|
| width | piksel yeni ImageData nesnesinin genişliği, |
| height | piksel yeni ImageData nesnenin yüksekliği, |
| imageData | anotherImageData nesnesi |