Canvas getImageData() Yöntemi

Canvas referans el kitabı

Tanım ve Kullanım

getImageData() Yöntem, belirli bir kanvasta belirli bir矩形的 piksel verilerini kopyalayan ImageData nesnesi döndürür.

ImageData nesnesindeki her pikselde, RGBA değerleri olarak dört yön bilgisi bulunmaktadır:

  • 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ür)

color/alpha, ImageData nesnesinin data özniteliklerinde kullanabilirsiniz.

İpucu:color/alpha bilgilerini işlemekten sonra, putImageData() Yöntem, resim verilerini canvas'a geri kopyalar.

Örnek:

Aşağıdaki kod, döndürülen ImageData nesnesinin ilk pikselinin 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, canvas üzerindeki belirli bir resmin her pikselinin renklerini tersine çevirmek için getImageData() yöntemini kullanabilirsiniz.

Bu formülü kullanarak tüm pikselleri dolaşın ve renk değerlerini değiştirin:

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

（Lütfen aşağıdaki 'Kişisel Deneyim' örneğini görün.)

Örnek

Örnek 1

Aşağıdaki kod, getImageData() ile canva üzerinde belirtilen矩形的像素数据 kopyalar, ardından putImageData() ile bu görüntü verilerini canva'ya geri yerleştirir:

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ğlanmıştı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

Canvas üzerindeki her pixelin rengini tersine çevirmek için getImageData() kullanın.

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

Tablodaki 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> elementini desteklememektedir.

Canvas referans el kitabı