Metoda Canvas getImageData()

Podręcznik Canvas

Definicja i użycie

getImageData() Metoda zwraca obiekt ImageData, który kopiuje dane pikseli z określonego prostokąta na kanvasie.

Dla każdego piksela w obiekcie ImageData istnieją cztery rodzaje informacji, tj. wartości RGBA:

  • R - czerwony (0-255)
  • G - zielony (0-255)
  • B - niebieski (0-255)
  • A - kanał alpha (0-255; 0 jest przezroczysty, 255 jest w pełni widoczny)

color/alpha istnieje w formie tablicy i jest przechowywane w obiekcie ImageData: data w właściwości.

Wskazówka:Po zakończeniu operacji na informacji o kolorze/alpha w tablicy, możesz użyć putImageData() Metoda kopiuje dane obrazu z powrotem na kanvas.

Przykład:

Poniższy kod uzyskuje informacje o kolorze/alpha pierwszego piksela zwróconego obiektu ImageData:

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

Spróbuj sam

Wskazówka:Możesz również użyć metody getImageData() do odwrócenia kolorów każdego piksela na kanvasie.

Użyj tego wzoru do przechodzenia przez wszystkie piksele i zmiany ich wartości koloru:

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

（Proszę zobaczyć przykład poniżej pod tytułem „Spróbuj sam”。）

Przykład

Przykład 1

Poniższy kod kopiuje dane pikseli z określonego prostokątnego obszaru powierzchni za pomocą getImageData() i umieszcza dane obrazu z powrotem na powierzchni za pomocą 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);
}

Spróbuj sam

Wskazówka:Więcej przykładów znajduje się na dole strony.

Gramatyka

var imgData = context.getImageData(x,y,width,height);

Wartości parametrów

Parametry Opis
x Koordynata x lewego górnego rogu miejsca rozpoczynania kopii.
y Koordynata y lewego górnego rogu miejsca rozpoczynania kopii.
width Szerokość kopii obszaru prostokątnego.
height Wysokość kopii obszaru prostokątnego.

Więcej przykładów

Przykład 2

Do użycia obraz:

The Tulip

Użyj getImageData() do odwrócenia kolorów każdego pixela na powierzchni.

Twoja przeglądarka nie obsługuje etykiety HTML5 canvas.

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);
// Odwróć kolory
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);

Spróbuj sam

Obsługa przeglądarki

Liczby w tabeli wskazują na wersję przeglądarki, która w pełni obsługuje tę właściwość.

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

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik Canvas