html5-canvas
Manipulation de pixels avec "getImageData" et "putImageData"

Introduction à "context.getImageData"

Html5 Canvas vous permet d'extraire et de modifier la couleur de tout pixel de la toile.

Vous pouvez utiliser la manipulation de pixels de Canvas pour:

• Créez un sélecteur de couleur pour une image ou sélectionnez une couleur sur une roue chromatique.
• Créez des filtres d'image complexes comme le flou et la détection des contours.
• Recolorez n'importe quelle partie d'une image au niveau du pixel (si vous utilisez HSL, vous pouvez même recolorer une image tout en conservant l'important Lighting & Saturation afin que le résultat ne ressemble pas à quelqu'un qui a giflé de la peinture sur l'image). Remarque: Canvas a désormais Blend Compositing qui peut également recolorer une image dans certains cas.
• "Knockout" l'arrière-plan autour d'une personne / d'un objet dans une image,
• Créez un outil de peinture pour détecter et remplir une partie d'une image (par exemple, changez la couleur d'un pétale de fleur sur lequel l'utilisateur a cliqué de vert à jaune).
• Examiner une image pour le contenu (par exemple, la reconnaissance faciale).

Problèmes courants:

• Pour des raisons de sécurité, getImageData est désactivé si vous avez dessiné une image provenant d'un autre domaine que la page Web elle-même.
• getImageData est une méthode relativement coûteuse car elle crée un grand tableau de données en pixels et n'utilise pas le GPU pour aider ses efforts. Remarque: Canvas a maintenant une composition de fusion qui peut faire la même manipulation de pixels que getImageData .
• Pour les images .png, getImageData peut ne pas rapporter exactement les mêmes couleurs que dans le fichier .png d'origine car le navigateur est autorisé à effectuer une correction gamma et une alpha-prémultiplication lors du dessin d'images sur le canevas.

Obtenir des couleurs de pixel

Utilisez getImageData pour récupérer les couleurs des pixels pour tout ou partie de votre contenu de canevas.

La méthode getImageData renvoie un objet imageData

L'objet imageData a une propriété .data contenant les informations de couleur des pixels.

La propriété data est un Uint8ClampedArray contenant les données de couleur Rouge, Vert, Bleu et Alpha (opacité) pour tous les pixels demandés.

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

Vous pouvez obtenir la position de tout pixel [x, y] dans data tableau de data comme ceci:

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

Et puis vous pouvez récupérer les valeurs rouges, vertes, bleues et alpha de ce pixel comme ceci:

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

Une illustration montrant comment le tableau de données de pixels est structuré

context.getImageData est illustré ci-dessous pour un petit tableau au format 2x3 pixels: