Najnowsze tutoriale tworzenie stron internetowych
 

HTML canvas getImageData() Method

<Płótno Przedmiot

Przykład

Kod poniżej kopii dane pikseli dla określonej prostokąta na płótnie getImageData() , a następnie umieścić dane obrazu z powrotem na płótnie 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 "

Wsparcie przeglądarka

Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.

metoda
getImageData() 4.0 9.0 3.6 4.0 10,1

Definicja i Wykorzystanie

getImageData() sposób wraca do obiektu Imagedata, że kopie danych pikseli w określonym prostokątem na płótnie.

Note: Przedmiotem imageData nie jest obraz, określa część (rectangle) na płótnie, i przechowuje informacje o każdym pikselu wewnątrz tego prostokąta.

Dla każdego piksela w obiekcie imageData istnieją cztery fragmenty informacji, wartości RGBA:

R - czerwony kolor (from 0-255)
G - Zieleń (from 0-255)
B - kolor niebieski (from 0-255)
A - kanał alfa (from 0-255; 0 is transparent and 255 is fully visible)

Informacje o kolorze / alfa jest utrzymywany w tablicy i przechowywane w danych nieruchomego obiektu Imagedata.

Tip: Po manipulowane informacji kolor / alfa w tablicy, można skopiować dane obrazu z powrotem na płótnie z putImageData() metody.

Example:

Kod do uzyskiwania informacji kolor / alfa pierwszego piksela zwróconego przedmiotu imageData:

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

Spróbuj sam

Tip: Można również użyć getImageData() metodę, aby odwrócić kolor każdego piksela na obrazie na płótnie.

Pętla przez wszystkie piksele i zmieniać wartości kolorów za pomocą tego wzoru:

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

Poniżej przedstawiamy "Try it Yourself" przykład!

Składnia JavaScript

Składnia JavaScript: context . getImageData( x,y,width,height ) ;

wartości parametrów

Parametr Opis
x Współrzędną x (in pixels) w lewym górnym rogu, aby rozpocząć od kopii
y Współrzędną y (in pixels) w lewym górnym rogu, aby rozpocząć od kopii
width Szerokość prostokątnego obszaru można skopiować
height Wysokość prostokątnego obszaru można skopiować
Przykłady

Więcej przykładów

Obraz używać:

Krzyk

Przykład

Użyj getImageData() , aby odwrócić kolor każdego piksela na obrazie na płótnie:

YourbrowserdoesnotsupporttheHTML5canvastag.

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
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 "
<Płótno Przedmiot