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

Video: Manipulación de Imágenes con Canvas - Editar Imágenes

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

Video: Curso HTML 5 API Canvas XI Imágenes como datos Vídeo 36

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 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 () {dibujo var = 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) -} // función final

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

1. Dibuje una imagen original.

   La técnica que vamos a usar extrae datos de un elemento de tela, por lo que modificar una imagen, primero tiene que dibujar en un lienzo. Puede utilizar la ordinaria 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. Hacer un lazo para manejar las filas.

   Video: 3.- Manipulación de Imágenes con Canvas - Guardar Canvas como Imagen

   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 es de datos suficiente para ir de 0 a la anchura de la tela, así que un segundo bucle en el interior del primero. Es muy común el uso de un par de anidada para bucles al paso a través de los datos bidimensionales como información de la imagen.

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

   Video: 4 canvas y javascript parte 7 dibujando imagenes

   los propiedad imageData matriz contiene cuatro enteros para cada píxel, por lo que tenemos 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. También se puede hacer el trabajo mucho más elaborado si desea jugar con la manipulación de imágenes a nivel de píxel.

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.

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

10. Dibuje los datos de imagen de nuevo 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.