html5-canvas
Manipulación de píxeles con "getImageData" y "putImageData"

Introducción a "context.getImageData"

Html5 Canvas le brinda la posibilidad de obtener y cambiar el color de cualquier píxel en el lienzo.

Puedes usar la manipulación de píxeles de Canvas para:

• Cree un selector de color para una imagen o seleccione un color en una rueda de color.
• Cree filtros de imagen complejos, como desenfoque y detección de bordes.
• Vuelva a colorear cualquier parte de una imagen a nivel de píxel (si usa HSL, puede incluso cambiar el color de una imagen mientras conserva la Iluminación y la Saturación importantes para que el resultado no se vea como si alguien hubiera pintado la imagen). Nota: Canvas ahora tiene Blend Compositing que también puede recolorear una imagen en algunos casos.
• "Knockout" el fondo alrededor de una persona / elemento en una imagen,
• Cree una herramienta de cubeta de pintura para detectar y rellenar parte de una imagen (p. Ej., Cambie el color de un pétalo de flor con el clic del usuario de verde a amarillo).
• Examine una imagen para el contenido (por ejemplo, reconocimiento facial).

Problemas comunes:

• Por razones de seguridad, getImageData está deshabilitado si ha dibujado una imagen que se origina en un dominio diferente al de la propia página web.
• getImageData es un método relativamente caro porque crea una gran matriz de datos de píxeles y porque no utiliza la GPU para ayudar en sus esfuerzos. Nota: Canvas ahora tiene una composición mixta que puede realizar la misma manipulación de píxeles que hace getImageData .
• Para imágenes .png, es posible que getImageData no informe exactamente los mismos colores que en el archivo .png original porque el navegador puede realizar correcciones gamma y multiplicación previa alfa cuando se dibujan imágenes en el lienzo.

Obteniendo colores de pixel

Use getImageData para obtener los colores de píxeles para todo o parte del contenido de su lienzo.

El método getImageData devuelve un objeto imageData

El objeto imageData tiene una propiedad .data que contiene la información de color de píxel.

La propiedad de data es un Uint8ClampedArray contiene los datos de color rojo, verde, azul y alfa (opacidad) para todos los píxeles solicitados.

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

Puede obtener la posición de cualquier píxel [x, y] dentro de data matriz de data esta manera:

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

Y luego puedes obtener los valores de rojo, verde, azul y alfa de ese píxel de esta manera:

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

Una ilustración que muestra cómo se estructura la matriz de datos de píxeles.

context.getImageData se ilustra a continuación para un pequeño lienzo de 2x3 píxeles: