html5-canvas
Pixelmanipulation med "getImageData" och "putImageData"

Introduktion till "context.getImageData"

Html5 Canvas ger dig möjlighet att hämta och ändra färgen på alla pixlar på duken.

Du kan använda Canvas pixelmanipulation för att:

• Skapa en färgväljare för en bild eller välj en färg på ett färghjul.
• Skapa komplexa bildfilter som suddighet och kantdetektering.
• Färga om någon del av en bild på pixelnivån (om du använder HSL kan du till och med färga en bild samtidigt som du behåller den viktiga belysning och mättnad så att resultatet inte ser ut som att någon tappade färg på bilden). Obs: Canvas har nu Blend Compositing som också kan färga en bild i vissa fall.
• "Knockout" bakgrunden runt en person / objekt i en bild,
• Skapa ett verktyg för måla-hink för att upptäcka och fylla på en del av en bild (t.ex. ändra färgen på ett användarklickat blommakronblad från grönt till gult).
• Undersök en bild för innehåll (t.ex. ansiktsigenkänning).

Vanliga problem:

• Av säkerhetsskäl är getImageData inaktiverat om du har ritat en bild med ursprung på en annan domän än själva webbsidan.
• getImageData är en relativt dyr metod eftersom den skapar en stor pixeldata-array och eftersom den inte använder GPU för att hjälpa sina ansträngningar. Obs: Canvas har nu blandningskompositionering som kan göra några av samma getImageData som getImageData gör.
• För .png-bilder kanske getImageData inte rapporterar exakt samma färger som i den ursprungliga .png-filen eftersom webbläsaren får göra gammakorrigering och alfa-förmultiplikation när man ritar bilder på duken.

Få pixelfärger

Använd getImageData att hämta pixelfärgerna för hela eller delar av ditt dukinnehåll.

Metoden getImageData returnerar ett imageData objekt

imageData objektet har en .data egenskap som innehåller information om .data .

Den data Fastigheten är en Uint8ClampedArray innehåller röd, grön, blå och alfa (opacitet) färgdata för alla begärda bildpunkter.

// 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;

Du kan få ställning som helst [x, y] pixel inom data array så här:

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

Och sedan kan du hämta den pixelens röda, gröna, blå och alfavärden som denna:

// 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];

En illustration som visar hur pixeldatasystemet är strukturerat

context.getImageData illustreras nedan för en liten 2x3 pixelstorlek: