Cómo manipular píxeles con la etiqueta canvas html5

Con HTML5, puede extraer los datos de un lona etiquetar a los datos de los píxeles subyacentes. La manipulación de estos datos le proporciona un amplio control de la imagen en tiempo real. Usted puede utilizar estos datos para el equilibrio de color, así como para experimentar con sus propias faltas de definición, se agudiza, y los efectos chroma-key.

No importa qué formato de una imagen se almacena en el sistema de archivos, se muestra como una lista de píxeles. Cada píxel está representado (en el sistema estándar de 32 bits, de todos modos) por cuatro enteros: RGBA. La R representa la cantidad de rojo está en el punto actual, G significa verde, y B significa azul. La A representa alfa, que es una medida de la transparencia de la imagen. Cada uno de estos valores pueden variar de 0 a 255. Al convertir una imagen en el formato de datos de imagen, se obtiene una gran cantidad de números enteros. Cada grupo de cuatro imágenes representa un solo píxel de los datos de color.

Este código cambia el equilibrio de color de una imagen:

 función draw () {var dibujo = document.getElementById ("dibujo") - con var = drawing.getContext ("2d") - var originales = document.getElementById ("original") - CANV_WIDTH = 200-CANV_HEIGHT = 200 / / dibujar el original en el canvascon.drawImage (original, 0, 0) - // obtener la imagen dataimgData = con.getImageData (0, 0, 200, 200) - // bucle a través de la imagen de formación Datos (fila = 0- fila lt; Fila CANV_HEIGHT- ++) {for (col = 0- col lt; Col CANV_WIDTH- ++) {// encontrar actual pixelindex = (col + (fila * imgData.width)) * 4 - // separar en el color valuesr = imgData.data [Índice] -g = imgData.data [index + 1] - b = imgData.data [index + 2] -a = imgData.data [index + 3] - // manipular valuesr de color - = 20 g + = 50-b - = 30 a = a - // gestionar conditionsif límite (r> 255) {r = 255-} if (r lt; 0) {r = 0-} if (g> 255) {g = 255-} if (g lt; 0) {g = 0-} if (b> 255) {r = 255-} if (b lt; 0) {b = 0-} if (a> 255) {a = 255-} si (a lt; 0) {a = 0 -} // devolver nuevos valores a dataimgData.data [índice] = r-imgData.data [index + 1] = g-imgData.data [index + 2] = b-imgData.data [Índice 3] = a-} // col final para el bucle} // fila final para el bucle // dibujar nueva imagen en canvascon.putImageData (imgData, 0, 0) -} // end function

Si bien el listado de código parece bastante largo, en realidad no es demasiado difícil de seguir:

1. Dibuja una imagen original.

   La técnica que utilizará extrae datos de un elemento canvas, por lo que para modificar una imagen, usted primero tiene que dibujar en un lienzo. Usted puede usar lo ordinario drawImage () método.

2. Extraer los datos de la imagen.

   los getImageData () método obtiene la imagen mostrada por el lienzo actual y lo coloca en una enorme variedad de números enteros.

3. Haga un lazo para manejar las filas.

   Los datos de imagen se divide en filas y columnas. Cada fila va de 0 a la altura de la tela, así que hacer una para bucle para iterar a través de las filas.

4. Hacer otro bucle de manejar las columnas.

   Dentro de cada fila hay suficientes datos para pasar de 0 a la anchura del lienzo, así que un segundo bucle for dentro de la primera. Es muy común el uso de un par de anidada para bucles al paso a través de los datos de dos dimensiones como información de la imagen.

5. Encuentra el índice en propiedad imageData para la fila y la columna actual.

   los propiedad imageData array contiene cuatro enteros para cada píxel, por lo que tenemos que hacer un poco de matemáticas para averiguar donde el primer número entero para cada píxel es. La fórmula más sencilla es multiplicar el número de fila por el ancho de la tela, añadir que el número de columna, y multiplicar el resultado completo por cuatro.

6. Tire de los valores de color correspondientes del índice.

   El índice también representa el valor de rojo del píxel actual. El próximo int contiene el valor verde, seguido por el valor azul, y, finalmente, el valor alfa.

7. Manipular los valores de color que quieras.

   Si vas a hacer una aplicación de color de equilibrio, sólo tiene que añadir o restar valores para cambiar el equilibrio de color general. También puede hacer un trabajo mucho más elaborado que si quieres jugar con la manipulación de imágenes a nivel de píxeles.

8. Compruebe si hay límites.

   Un valor de píxel no puede ser inferior a 0 o superior a 255, a fin de comprobar para ambos límites y ajustar todos los valores de los píxeles para estar dentro de los límites legales.

9. Volver valores manipulados de nuevo a la imgData array.

   Puede copiar los valores de nuevo a la matriz, y debe hacerlo para que los cambios sean visibles.

10. Dibuja los datos de la imagen de nuevo a la lona.

    los putImageData () función dibuja los datos de las imágenes actuales de nuevo a la lona como una imagen normal. La nueva versión de la imagen reflejará los cambios.