HTML5 Procesamiento de píxeles de Canvas

HTML5 Método de uso de la función createImageData() para el procesamiento de píxeles de Canvas, demostración en línea de procesamiento de píxeles de Canvas, cómo copiar píxeles en el lienzo, detalles de la definición de sintaxis y sus valores de atributo, etc.

se puede acceder5los píxeles de la lienzo. Puede usar el objeto ImageData para realizar esta operación. El objeto ImageData contiene un array de píxeles. Al acceder a este array, puede manipular los píxeles. Después de completar la operación de píxeles, debe copiar los píxeles al lienzo para mostrarlos.

Crear un objeto ImageData

Crear un objeto ImageData es utilizando2D la función createImageData() completada por el contexto HTML. Este es un ejemplo:

var canvas            = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width =　100;
var height =　100;
var imageData = context.createImageData(width,            height);

La función createImageData() del atributo width y height establece el ancho y la altura del área de píxeles representada por el objeto ImageData creado (en píxeles). El ejemplo anterior crea un ImageData con100 x 10un objeto de 0 píxeles de área.

Propiedades de ImageData

El objeto ImageData tiene tres propiedades:

• width

• height

• data

Las propiedades width y height contienen el ancho y la altura del área de datos de la imagen.
La propiedad data es un array de bytes que contiene los valores de los píxeles.

procesamiento de píxeles

　cada pixel en el array data contiene4valores de un byte cada uno. Rojo, verde y azul forman un valor, mientras que el canal alpha forma otro valor. El color del píxel se determina mezclando rojo, verde y azul para formar el color final. El canal alpha describe la transparencia del píxel. Cada uno de los valores de rojo, verde, azul y alpha puede ser de 0 a255entre los valores.
Este es un ejemplo de código para establecer el color y el valor de Alpha del primer píxel:

var pixelIndex = 0;
imageData.data[pixelIndex            ] =　255;　　//　color rojo
imageData.data[pixelIndex　+　1] =            0;　　//　color verde
imageData.data[pixelIndex　+　2] =            0;　　//　color azul
imageData.data[pixelIndex　+　3] =　255;

Utilice el siguiente código para leer valores de píxeles:

var pixelIndex = 0;
var rojo = imageData.data[pixelIndex            ];　　//　color rojo
var verde = imageData.data[pixelIndex　+　1];　　//　color verde
var blue = imageData.data[pixelIndex　+　2];　　//　color azul
var alpha = imageData.data[pixelIndex　+　3];

Para acceder al valor pixelIndex del siguiente píxel, aumente su valor4(cada píxel está compuesto por4elementos de un array, como se muestra anteriormente).
Puede calcular el índice del píxel dado de la siguiente manera:

　var index =　4　*　(x　+　y　*　);

El x y y en el cálculo son calculados como índices de píxeles x y y del píxel. Los píxeles en el array de datos se organizan en una secuencia larga de píxeles, comenzando desde el pixel superior izquierdo, moviéndose verticalmente hacia la derecha. Al llegar al final de la línea, la secuencia de píxeles continúa desde el pixel más izquierdo de la línea inferior. Por lo tanto, para calcular el índice del píxel ubicado en x, debe multiplicar la coordenada y por el número de píxeles por línea y luego agregar el valor de x.
Esto es una explicación20 píxeles de ancho y8la imagen del array de píxeles de ImageData de altura de píxeles. En el margen derecho se enumera el índice de cada línea de píxeles. Como puede ver, la enumeración de los índices comienza desde la esquina superior izquierda y aumenta hacia la derecha. Al llegar al borde de la línea, la enumeración continúa desde el pixel más izquierdo de la línea inferior y sigue hacia la derecha.

para copiar píxeles al lienzo

Después de procesar los píxeles, se puede usar2La función DContext tiene dos versiones putImageData(). La primera versión de la función putImageData() copia todos los píxeles al lienzo. Este es un ejemplo:

var canvasX =　25;
var canvasY =　25;
context.putImageData(imageData, canvasX, canvasY);

Los parámetros canvasX y canvasY son las coordenadas y del lugar donde se insertan los píxeles en el lienzo.
La segunda versión de la función putImageData() puede copiar un rectángulo de píxeles en lugar de todos los píxeles al lienzo. Este es un ejemplo de código:

var canvasX =　25;
var canvasY =　25;
var sx = 0;
var sy = 0;
var sWidth =　25;
var sHeight =　25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

Los parámetros sx y sy (sourceX y sourceY) son las coordenadas x y de la esquina superior izquierda del rectángulo, copiados desde el array de píxeles.
Los parámetros sWidth y sHeight (sourceWidth y sourceHeight) son el ancho y la altura del rectángulo, copiados desde el arreglo de píxeles.

Obtener píxeles del canvas

También se puede capturar un rectángulo de píxeles del lienzo a un objeto ImageData. Esto se realiza utilizando la función getImageData(). Aquí hay un ejemplo:

var x =　　25;
var y =　　25;
var width =　100;
var height =　100;
var imageData2　= context.getImageData(x, y, width, height);

Los parámetros x y y son las coordenadas del extremo superior izquierdo del rectángulo del lienzo.
Los parámetros width y height son el ancho y la altura del rectángulo del lienzo.