Cómo manipular píxeles en la pagina web de javascript para HTML5 y CSS3 programación

los etiqueta en javascript tiene un truco más increíble en la manga para HTML5 y CSS3 programadores. Usted puede extraer los datos de un etiquetar a los datos de los píxeles subyacentes. Si usted sabe cómo manipular estos datos, se puede tener un amplio control de la imagen en tiempo real. Usted puede utilizar estos datos para el equilibrio de color, así como la experimentación con desenfoques personalizados, agudiza y efectos chroma-key.

Para entender cómo tener tanto control de sus imágenes, es necesario tener algún conocimiento de cómo las imágenes se almacenan en la memoria. 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.

El valor 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 a la propiedad imageData, se obtiene una gran cantidad de números enteros. Cada grupo de cuatro números enteros representa un solo píxel de los datos de color.

He aquí un ejemplo que cambia el equilibrio de color de una imagen:

 función draw () {// del dibujo pixel.htmlvar = 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) -} // fin functionAlthough el listado de código parece muy largo, en realidad no es demasiado difícil de seguir:

1. Dibuja una imagen original.

   La técnica que usará extrae datos de una elemento, por lo que para modificar una imagen, primero tienes que dibujar en un lienzo.

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, por lo 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 es de datos desde 0 a la anchura de la tela, por lo que hacer una segunda para bucle dentro de la primera. Es muy común el uso de un par de bucles for anidados a paso a través de los datos de dos dimensiones como información de la imagen.

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

   los propiedad imageData array contiene cuatro enteros para cada píxel, por lo que tiene 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 a su gusto.

   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.

8. Compruebe si hay límites.

   Un valor de píxel no puede ser menor que 0 o mayor que 255, a fin de comprobar tanto de estos 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 hacer los cambios visibles.

10. Dibuja la parte posterior 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.