Płótno HTML Metoda createImageData()
Przykład
Utwórz obiekt ImageData o wymiarach 100*100 pikseli, w którym każdy piksel jest czerwony, i umieść 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);
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definicja i użycie
Metoda createImageData() tworzy nowy, pusty obiekt ImageData. Wartości pikseli nowego obiektu są domyślnie przezroczyste w kolorze czarnym.
Dla każdego piksela w obiekcie ImageData istnieją cztery informacje, wartości RGBA:
R - Kolor czerwony (od 0-255)
G - Kolor zielony (od 0-255)
B - Kolor niebieski (od 0-255)
A - Kanał alfa (od 0-255; 0 jest przezroczysty, a 255 to w pełni widoczne)
Tak więc przezroczysta czerń oznacza: (0, 0, 0, 0).
Informacje o kolorze/alfa są przechowywane w tablicy, a ponieważ tablica zawiera 4 informacje na każdy piksel, rozmiar tablicy jest 4 razy większy od rozmiaru obiektu ImageData: szerokość*wysokość*4. (Łatwiejszym sposobem na znalezienie rozmiaru tablicy jest użycie ImageDataObject.data.length)
Tablica zawierająca informacje o kolorze/alfa jest przechowywana we właściwości data obiektu ImageData.
Wskazówka: Po manipulowaniu informacjami o kolorze/alfa w tablicy możesz skopiować dane obrazu z powrotem na kanwę za pomocą metody putImageData() .
Przykłady:
Składnia zmiany pierwszego piksela w obiekcie ImageData na kolor czerwony:
imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
Składnia zmiany koloru drugiego piksela w obiekcie ImageData na zielony:
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 metody createImageData():
1. Spowoduje to utworzenie nowego obiektu ImageData o określonych wymiarach (w pikselach):
| Składnia JavaScript: | var imgData = kontekst .createImageData( szerokość, wysokość ); |
|---|
2. Spowoduje to utworzenie nowego obiektu ImageData o takich samych wymiarach jak obiekt określony przez anotherImageData (to nie kopiuje danych obrazu):
| JavaScript syntax: | var imgData = context.createImageData(imageData); |
|---|
Wartości parametrów
| Parameter | Description |
|---|---|
| width | The width of the new ImageData object, in pixels |
| height | The height of the new ImageData object, in pixels |
| imageData | anotherImageData object |
❮Płótno obiektu