Acceso a datos de píxeles en HTML Canvas

¿Es posible recuperar el color de un píxel específico dentro de un objeto HTML Canvas? Sí, puede acceder y manipular datos de píxeles en HTML Canvas utilizando varios métodos proporcionados por la API de Canvas.

Obtener el color de píxel

Para recuperar el color de un píxel en una ubicación específica dentro de un lienzo, puede utilizar el método getImageData(). Este método devuelve un objeto ImageData que representa una parte del lienzo. El objeto ImageData contiene una matriz de datos de píxeles a los que puede acceder utilizando la propiedad .data.

Manipulación de píxeles

Una vez que haya obtenido los datos de píxeles, puede manipular como desee. Por ejemplo, puede crear una imagen en escala de grises convirtiendo cada píxel a un tono 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);

Al aprovechar los métodos getImageData() y putImageData(), puede realizar varias tareas de manipulación de píxeles, como filtrado de imágenes, ajustes de color y creación de efectos en HTML. Lienzo.