Örnek
Kopya aşağıdaki kod piksel tuval üzerinde belirli bir dikdörtgen için veriler getImageData() , ve sonra tuvale üzerine geri görüntü veri koymak 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);
} Kendin dene " Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.
| Yöntem | |||||
|---|---|---|---|---|---|
| getImageData() | Evet | 9.0 | Evet | Evet | Evet |
Tanımı ve Kullanımı
getImageData() yöntemi, bir ImageData nesnesi geri kopyalayan bir tuval üzerinde belirtilen dikdörtgen piksel verileri.
Note: ImageData nesnesi, bir resim değil, bir bölümünü belirtir (rectangle) Tuval üzerine ve bu dikdörtgenin içindeki her pikselin bilgisini tutar.
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)
Renk / alfa bilgiler bir dizi içinde tutulur ve saklanır 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.
Example:
döndürülen ImageData nesnesinde ilk pikselin renk / alfa bilgi almak için kod:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Kendin dene " Tip: Ayrıca kullanabilirsiniz getImageData() Tuval üzerine bir görüntünün her piksel rengini ters çevirmek için yöntem.
tüm pikseller arasında döngü ve değişim bu formülü kullanarak renk değerleri:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Bir için aşağıya bakın "Try it Yourself" Örneğin!
JavaScript sözdizimi
| JavaScript sözdizimi: | context . getImageData( x,y,width,height ) ; |
|---|
Parametre Değerleri
| Parametre | Açıklama |
|---|---|
| x | X koordinatı (in pixels) sol üst köşesinin gelen kopyalamayı başlatmak için |
| y | Y koordinatı (in pixels) sol üst köşesinin gelen kopyalamayı başlatmak için |
| width | Eğer kopyalar dikdörtgen alanın genişliği |
| height | Eğer kopyalar dikdörtgen alanın yüksekliği |
Diğer Örnekler
Görüntü kullanmak:
Örnek
Kullan getImageData() Tuval üzerine bir görüntünün her piksel rengini ters çevirmek için:
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); Kendin dene "