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);
var i;
for (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()	Yes	9.0	Yes	Yes	Yes

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

❮ Odniesienie do płótna HTML