Metoda getImageData() canvas HTML

Podręcznik referencyjny HTML5 Canvas

Definicja i użycie

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

Dla każdego piksela obiektu ImageData istnieją cztery rodzaje informacji, czyli wartości RGBA:

  • R - czerwony (0-255)
  • G - zielony (0-255)
  • B - niebieski (0-255)
  • A - kanał alpha (0-255; 0 to przezroczystość, 255 to pełna widoczność)

Informacje o kolorze/alfa istnieją w formie tablicy i są przechowywane w obiekcie ImageData: data w właściwości.

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

Przykład:

Poniższy kod umożliwia uzyskanie informacji o kolorze/alfa pierwszego piksela 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 pixela na określonym obrazie na karcie.

Przejdź przez wszystkie pixele za pomocą tej formuły i zmień ich wartości kolorów:

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

（Zobacz poniższy przykład „Spróbuj sam”.)

Przykład

Przykład 1

Poniższy kod kopiuje dane pixeli z określonego prostokątnego obszaru na karcie za pomocą getImageData() i umieszcza je z powrotem na karcie 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 Pozycja x lewego górnego rogu początku kopii.
y Pozycja y lewego górnego rogu początku kopii.
width Szerokość kopii obszaru prostokątnego.
height Wysokość kopii obszaru prostokątnego.

Więcej przykładów

Przykład 2

Wykorzystywane obrazy:

The Tulip

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

Twoja przeglądarka nie obsługuje znacznika 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);
// odwracanie kolorów
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

Wsparcie przeglądarek

Liczby w tabeli oznaczają pierwszą 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:Przeglądarki Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik referencyjny HTML5 Canvas