Zugriff auf Pixeldaten in HTML Canvas

Ist es möglich, die Farbe eines bestimmten Pixels innerhalb eines HTML Canvas-Objekts abzurufen? Ja, Sie können mit verschiedenen von der Canvas-API bereitgestellten Methoden auf Pixeldaten in HTML Canvas zugreifen und diese bearbeiten.

Pixelfarbe abrufen

Um die Farbe eines Pixels abzurufen An einer bestimmten Stelle innerhalb einer Leinwand können Sie die Methode getImageData() verwenden. Diese Methode gibt ein ImageData-Objekt zurück, das einen Teil der Leinwand darstellt. Das ImageData-Objekt enthält ein Array von Pixeldaten, auf die Sie über die Eigenschaft .data zugreifen können.

Pixelmanipulation

Sobald Sie die Pixeldaten erhalten haben, können Sie sie bearbeiten es wie gewünscht. Sie können beispielsweise ein Graustufenbild erstellen, indem Sie jedes Pixel in einen Grauton konvertieren:

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

Durch die Nutzung der Methoden getImageData() und putImageData() können Sie verschiedene Pixelmanipulationsaufgaben ausführen, wie z. B. Bildfilterung, Farbanpassungen und das Erstellen von Effekten in HTML Leinwand.