html5-canvas
Manipulacja pikselami za pomocą „getImageData” i „putImageData”

Wprowadzenie do „context.getImageData”

HTML5 Canvas daje możliwość pobierania i zmiany koloru dowolnego piksela na płótnie.

Za pomocą manipulacji pikselami Canvas można:

• Utwórz próbnik kolorów dla obrazu lub wybierz kolor na kole kolorów.
• Twórz złożone filtry obrazów, takie jak rozmycie i wykrywanie krawędzi.
• Ponownie pokoloruj dowolną część obrazu na poziomie pikseli (jeśli używasz HSL, możesz nawet pokolorować obraz, zachowując ważne oświetlenie i nasycenie, aby wynik nie wyglądał, jakby ktoś uderzył go farbą). Uwaga: Płótno ma teraz funkcję mieszania, która w niektórych przypadkach może również zmieniać kolor obrazu.
• „Nokaut” tła wokół osoby / przedmiotu na obrazie,
• Utwórz narzędzie wiadra z farbą, aby wykryć i wypełnić część obrazu (np. Zmienić kolor płatka kwiatu klikniętego przez użytkownika z zielonego na żółty).
• Sprawdź obraz pod kątem zawartości (np. Rozpoznawanie twarzy).

Powszechne problemy:

• Ze względów bezpieczeństwa getImageData jest wyłączony, jeśli narysowałeś obraz pochodzący z innej domeny niż sama strona internetowa.
• getImageData to stosunkowo droga metoda, ponieważ tworzy dużą tablicę danych pikselowych i ponieważ nie wykorzystuje procesora graficznego do wspomagania swoich działań. Uwaga: Canvas ma teraz kompozycję mieszania, która może wykonywać te same manipulacje pikselami, które robi getImageData .
• W przypadku obrazów .png getImageData może nie zgłaszać dokładnie tych samych kolorów, co w oryginalnym pliku .png, ponieważ przeglądarka może wykonywać korekcję promieniowania gamma i getImageData alfa podczas rysowania obrazów na płótnie.

Uzyskiwanie kolorów pikseli

Użyj getImageData aby pobrać kolory pikseli dla całości lub części treści obszaru roboczego.

Metoda getImageData zwraca obiekt imageData

Obiekt imageData ma właściwość .data która zawiera informacje o kolorze pikseli.

Właściwość data to Uint8ClampedArray zawierający dane koloru czerwonego, zielonego, niebieskiego i alfa (krycie) dla wszystkich wymaganych pikseli.

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

Pozycję dowolnego [x, y] piksela w tablicy data można uzyskać w następujący sposób:

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

Następnie możesz pobrać wartości czerwonego, zielonego, niebieskiego i alfa tego piksela w następujący sposób:

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

Ilustracja przedstawiająca strukturę tablicy danych pikseli

context.getImageData jest zilustrowany poniżej dla małego płótna o rozmiarach 2 x 3 piksele: