En son web geliştirme öğreticiler
 

HTML canvas getImageData() Method

<Tuval Nesne

Ö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() 4.0 9.0 3.6 4.0 10.1

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 veri 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
Örnekler

Diğer Örnekler

Görüntü kullanmak:

Çığlık

Örnek

Kullan getImageData() Tuval üzerine bir görüntünün her piksel rengini ters çevirmek için:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 "
<Tuval Nesne