HTML canvas getImageData() yöntemi

HTML5 Canvas Referans Kılavuzu

Tanım ve Kullanım

getImageData() Metod, çerçeveye belirtilen矩形的像素数据拷贝的 ImageData nesnesi döndürür.

ImageData nesnesindeki her piksel, RGBA değerleri olarak dört yön bilgisi içerir:

  • R - kırmızı (0-255)
  • G - yeşil (0-255)
  • B - mavi (0-255)
  • A - alpha kanalı (0-255; 0 şeffaftır, 255 tamamen görünürlüdür)

color/alpha, ImageData nesnesinin data özniteliklerinde kullanabilirsiniz.

İpucu:Array'deki color/alpha bilgilerini işlemekten sonra, putImageData() Metni çerçeveye kopyalama yöntemi.

Örnek:

Aşağıdaki kod, döndürülen ImageData nesnesinin ilk pikselin color/alpha bilgilerini elde etmeyi sağlar:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Kişisel olarak deneyin

İpucu:Ayrıca, getImageData() yöntemini kullanarak kanva üzerindeki belirli bir resmin her pixelinin rengini tersine çevirebilirsiniz。

Bu formülü kullanarak tüm pixel'leri tarayın ve renk değerlerini değiştirin：

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

（请见下面的“亲自试一试”实例。）

实例

例子 1

Aşağıdaki kod, getImageData() ile kanva üzerinde belirli bir矩形的像素数据进行复制，然后通过 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);
}

Kişisel olarak deneyin

İpucu:Daha fazla örnek, sayfa altında sağlanmaktadır.

Sözdizimi

var imgData=context.getImageData(x,y,genişlik,yükseklik);

Parametre değeri

Parametre Açıklama
x Kopyalamanın sol üst köşesinin x koordinatı.
y Kopyalamanın sol üst köşesinin y koordinatı.
genişlik Kopyalanacak düzgen alanının genişliği.
yükseklik Kopyalanacak düzgen alanının yüksekliği.

Daha fazla örnek

Örnek 2

Kullanılacak resim:

Lale

getImageData() kullanarak kanva üzerindeki her pixelin rengini tersine çevirin.

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Renkleri tersine çevir
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);

Kişisel olarak deneyin

Tarayıcı Desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> ögesini desteklemez.

HTML5 Canvas Referans Kılavuzu