Przykład
Poniższy kod kopiuje dane pikseli w określonym prostokącie na płótnie z getImageData() , a następnie umieścić dane obrazu z powrotem na płótnie z 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 " Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| getImageData() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
getImageData() Metoda zwraca obiekt imageData która kopiuje dane pikseli dla określonego prostokąta na płótnie.
Uwaga: Przedmiotem imageData nie jest obraz, to określa część (prostokąt) 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 - Kolor czerwony (od 0-255)
G - Kolor zielony (od 0-255)
B - Kolor niebieski (od 0-255)
- Kanał alpha (od 0-255; 0 jest przezroczysty, a 255 jest w pełni widoczny)
Informacja o kolorach / alfa odbywa się w tablicy i jest przechowywany w data nieruchomego obiektu imageData.
Wskazówka: Po manipulowane kolor / informacje alfa w tablicy, można skopiować dane obrazu z powrotem na płótnie z putImageData() metody.
Przykład:
Kod uzyskania 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 " Wskazówka: 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 zmień wartości kolorów za pomocą następującego wzoru:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Poniżej znajduje się "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ędna x (w pikselach), na lewym górnym rogu, aby uruchomić kopię z |
| y | Współrzędna y (w pikselach), na lewym górnym rogu, aby uruchomić kopię z |
| width | Szerokość prostokątnego obszaru można skopiować |
| height | Wysokość prostokątnego obszaru można skopiować |
Więcej przykładów
Obrazek do wykorzystania:
Przykład
Użyj getImageData() , aby odwrócić kolor każdego piksela na obrazie na płótnie:
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 "