Accès aux données de pixels dans HTML Canvas

Est-il possible de récupérer la couleur d'un pixel spécifique dans un objet HTML Canvas ? Oui, vous pouvez accéder aux données de pixels et les manipuler dans HTML Canvas à l'aide de diverses méthodes fournies par l'API Canvas.

Obtention de la couleur des pixels

Pour récupérer la couleur d'un pixel à un emplacement spécifique dans un canevas, vous pouvez utiliser la méthode getImageData(). Cette méthode renvoie un objet ImageData qui représente une partie du canevas. L'objet ImageData contient un tableau de données de pixels auquel vous pouvez accéder à l'aide de la propriété .data.

Manipulation de pixels

Une fois que vous avez obtenu les données de pixels, vous pouvez manipuler comme souhaité. Par exemple, vous pouvez créer une image en niveaux de gris en convertissant chaque pixel en une nuance de gris :

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i  = 4) {
  var gray = (pix[i]   pix[i 1]   pix[i 2]) / 3;
  pix[i  ] = gray;
  pix[i 1] = gray;
  pix[i 2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

En tirant parti des méthodes getImageData() et putImageData(), vous pouvez effectuer diverses tâches de manipulation de pixels, telles que le filtrage d'images, les ajustements de couleurs et la création d'effets sur HTML. Toile.