HTML tuvali getImageData() Yöntemi
Örnek
Aşağıdaki kod, tuval üzerinde belirtilen bir dikdörtgen için piksel verilerini getImageData() ile kopyalar ve ardından görüntü verilerini putImageData() ile tuvale geri koyar:
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);
}
Tarayıcı Desteği
Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Tanım ve Kullanım
getImageData() yöntemi, bir tuval üzerinde belirtilen dikdörtgen için piksel verilerini kopyalayan bir ImageData nesnesi döndürür.
Not: ImageData nesnesi bir resim değildir, tuval üzerinde bir parça (dikdörtgen) belirtir ve o dikdörtgenin içindeki her pikselin bilgisini tutar.
Bir ImageData nesnesindeki her piksel için dört bilgi parçası vardır, RGBA değerleri:
R - Kırmızı renk (0-255 arası)
G - Yeşil renk (0-255 arası)
B - Mavi renk (0-255 arası)
A - Alfa kanalı (0-255 arası; 0 şeffaftır ve 255 tamamen görünür)
Renk/alfa bilgisi bir dizide tutulur ve ImageData nesnesinin data özelliğinde saklanır.
İpucu: Dizideki renk/alfa bilgisini değiştirdikten sonra, putImageData() yöntemiyle görüntü verilerini tuvale geri kopyalayabilirsiniz .
Örnek:
Döndürülen ImageData nesnesindeki ilk pikselin renk/alfa bilgilerini alma kodu:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
İpucu: Tuval üzerindeki bir görüntünün her pikselinin rengini tersine çevirmek için getImageData() yöntemini de kullanabilirsiniz.
Tüm pikseller arasında dolaşın ve bu formülü kullanarak renk değerlerini değiştirin:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
"Kendiniz Deneyin" örneği için aşağıya bakın!
JavaScript Sözdizimi
| JavaScript sözdizimi: | bağlam .getImageData( x,y,genişlik,yükseklik ); |
|---|
Parametre Değerleri
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Daha fazla örnek
Kullanılacak resim:
Örnek
Tuval üzerindeki bir görüntünün her pikselinin rengini tersine çevirmek için getImageData() kullanın:
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
var i;
for (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);
❮ HTML Kanvas Referansı