Przykład
Tworzenie 100*100 pikseli imageData obiektu, gdzie każdy piksel jest czerwona, i umieścić go na płótnie:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10); Spróbuj sam " Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| createImageData() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
createImageData() metoda tworzy nowy, pusty imageData obiekt. wartości pikseli nowego obiektu są przezroczyste czarne domyślnie.
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)
Więc, przezroczysty czarny wskazuje: (0,0,0,0) .
Informacja o kolorach / alfa odbywa się w tablicy, a ponieważ tablica składa się z 4 części informacji dla każdego piksela, wielkość tablicowej, która jest 4 razy większy od przedmiotu imageData: szerokość * wysokość * 4. (Łatwiejszy sposób, aby znaleźć rozmiar tablicy, jest użycie ImageDataObject.data.length)
Tablica zawierająca informacje koloru / alfa są przechowywane 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łady:
Składnia złożenia pierwszego piksela w imageData obiekt na czerwono:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;Składnia co drugi piksel w obiekcie imageData zieleni:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;Składnia JavaScript
Istnieją dwie wersje createImageData() metody:
1. Tworzy nowy obiekt imageData z określonymi wymiarami (w pikselach):
| Składnia JavaScript: | var imgData=context.createImageData(width,height); |
|---|
2. Tworzy nowy obiekt imageData o tych samych wymiarach jak obiektu określonego przez anotherImageData (nie skopiować dane obrazu):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
wartości parametrów
| Parametr | Opis |
|---|---|
| width | Szerokość nowego obiektu Imagedata w pikselach |
| height | Wysokość nowego obiektu Imagedata w pikselach |
| imageData | obiekt anotherImageData |