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

los etiqueta en javascript tiene un truco más increíble en la manga para HTML5 y CSS3 programadores. Puede extraer los datos de una etiqueta en 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. Puede utilizar estos datos para el equilibrio de color, así como experimentar con desenfoques personalizados, agudiza, y los efectos chroma-key.

Con el fin de 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 números 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 alpha, 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 enorme variedad 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:

Video: Curso de Diseño y Programación Web

 sorteo function () {// desde pixel.htmlvar 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 color de valuesr = imgData.data [índice] -g = imgData.data [índice + 1] - b = imgData.data [índice + 2] -a = imgData.data [índice + 3] - // manipular valuesr color - = 20-g + = 50-b - = 30-a = a - // gestionar conditionsif límite (r gt; 255) {r = 255-} si (r lt; 0) {r = 0-} if (g gt; 255) {g = 255-} if (g lt; 0) {g = 0-} if (b gt; 255) {r = 255-} if (b lt; 0) {b = 0-} si (a gt; 255) {a = 255-} si (a lt; 0) {a = 0 -} // devolver nuevos valores a dataimgData.data [índice] = r-imgData.data [índice + 1] = g-imgData.data [índice + 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 bastante largo, en realidad no es demasiado difícil de seguir:

1. Dibuje una imagen original.

   La técnica que vamos a usar extractos de datos de una elemento, de manera de 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. Hacer un lazo para manejar las filas.

   Los datos de imagen se divide en filas y columnas. Cada fila va desde 0 a la altura del lienzo, 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 son datos de 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 al paso a través de datos de dos dimensiones, como información de imagen.

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

   los propiedad imageData matriz contiene cuatro enteros para cada píxel, por lo que tiene que hacer un poco de matemáticas para averiguar donde el primer entero para cada pixel es. La fórmula más sencilla consiste en multiplicar el número de fila por el ancho de la tela, añadir que para 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 siguiente int contiene el valor de verde, seguido por el valor azul, y, finalmente, el valor alfa.

7. Manipular los valores de color que desee.

   Si vas a hacer una aplicación de color equilibrio, simplemente puede añadir o restar los 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 para ambos de estos límites y ajustar todos los valores de píxel para estar dentro de los límites legales.

9. Devolver valores manipulados de nuevo a la imgData formación.

   Video: HTML5 y CSS3 - 2 - Plantilla basica y primera página web

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

10. Dibujar la parte posterior a la lona.

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