html5-canvas
Pixelmanipulatie met "getImageData" en "putImageData"

Inleiding tot "context.getImageData"

Met Html5 Canvas kunt u elke kleur op het canvas ophalen en wijzigen.

U kunt Canvas's pixelmanipulatie gebruiken om:

• Maak een kleurenkiezer voor een afbeelding of selecteer een kleur op een kleurenwiel.
• Maak complexe afbeeldingsfilters zoals vervaging en randdetectie.
• Kleur elk deel van een afbeelding opnieuw op pixelniveau (als u HSL gebruikt, kunt u een afbeelding zelfs opnieuw kleuren met behoud van de belangrijke verlichting en verzadiging, zodat het resultaat er niet uitziet als iemand die verf op de afbeelding heeft geslagen). Opmerking: Canvas heeft nu Blend Compositing die in sommige gevallen ook een afbeelding opnieuw kan kleuren.
• "Knockout" de achtergrond rond een persoon / item in een afbeelding,
• Maak een emmertje om een deel van een afbeelding te detecteren en te vullen (bijv. Verander de kleur van een door een gebruiker aangeklikt bloemblad van groen naar geel).
• Bekijk een afbeelding op inhoud (bijv. Gezichtsherkenning).

Gebruikelijke problemen:

• Om veiligheidsredenen is getImageData uitgeschakeld als u een afbeelding hebt getekend die afkomstig is uit een ander domein dan de webpagina zelf.
• getImageData is een relatief dure methode omdat het een grote pixel-data array creëert en omdat het de GPU niet gebruikt om zijn inspanningen te ondersteunen. Opmerking: Canvas heeft nu een blendcompositie die een aantal van dezelfde getImageData kan uitvoeren als getImageData .
• Voor .png-afbeeldingen rapporteert getImageData mogelijk niet exact dezelfde kleuren als in het originele .png-bestand omdat de browser gammacorrectie en alfa-voorvermenigvuldiging mag uitvoeren bij het tekenen van afbeeldingen op het canvas.

Pixelkleuren krijgen

Gebruik getImageData om de pixelkleuren op te halen voor alle of een deel van uw canvasinhoud.

De methode getImageData retourneert een imageData object

De imageData object een .data eigenschap dat de pixelkleur informatie bevat.

De data eigenschap is een Uint8ClampedArray met de Uint8ClampedArray Rood, Groen, Blauw en Alpha (dekking) voor alle gevraagde pixels.

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

U kunt de positie van elke [x, y] pixel binnen de data als volgt krijgen:

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

En dan kunt u de rode, groene, blauwe en alfawaarden van die pixel als volgt ophalen:

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

Een illustratie die laat zien hoe de pixelgegevensreeks is gestructureerd

context.getImageData wordt hieronder geïllustreerd voor een klein canvas van 2x3 pixels: