Capítulo 10 Manejo de imágenes con el canvas de HTML5

10. Manejo de imágenes con el canvas de HTML5 Una de las características más poderosas del canvas de HTML5 es el poder cargar imágenes de archivos externos, como formatos JPG, PNG o GIF. Una vez que hemos cargado las imágenes, será muy sencillo manipularla para hacer filtros o efectos, ya que, finalmente, las imágenes no son otra cosa más que números. El navegador Chrome nos enviará un error de dominios cruzados o “crossdomain” debido a que tiene un candado de seguridad. La forma correcta de ejecutarlo es dentro de un servidor Web, Apache o IIS.

10.1 Cargar una imagen en canvas Antes de iniciar, abra el archivo canvasBase.html y guárdelo como canvasImagenes.html. Escriba las siguientes instrucciones dentro de la verificación del contexto. Debemos de crear un objeto de tipo Image, después cargamos la imagen con el método src, luego invocamos una función que se llama procesaImagen(), ahí utilizamos la instrucción drawImage() para vaciar la imagen del archivo al canvas. Igual que en la sección anterior, estamos en una función que tiene muy poco código, pero es una “buena práctica” estructurarlo así. Guarde su archivo y visualícelo en un navegador. Verá cargada la imagen que eligió en la parte izquierda del lienzo.

10.2 Modificar una imagen cargada Una vez que cargamos una imagen podemos procesarla, pues no son otra cosa que números. Antes de iniciar, abra el archivo canvasImagenes.html y guárdelo como canvasImagenesGrises.html. Determinamos el ancho y la altura de ésta leída. Posteriormente, con el método getImageData() creamos un objeto con la información de la misma, leyéndola directamente del lienzo, desde las coordenadas indicadas y del ancho y alto especificado. Del objeto creado, es decir, imagenData extraemos después la información y hacemos un arreglo llamado data. Con ello podemos procesar la imagen, como se muestra en el ciclo for. Para visualizar esta información, ya modificada, utilizamos el método putImageData() que la dibuja nuevamente en el lienzo, pero en este caso en su lado derecho de la imagen original. Observe que no estamos escribiendo el arreglo, sino al objeto imagenData. Guarde su archivo y visualícelo en un navegador. Verá cargada la imagen en la parte izquierda del canvas y en la derecha la misma imagen, pero en escala de grises o blanco y negro.

10.3 Realizar un filtro de imagen a negativo Ahora realizaremos un filtro que es muy sencillo: pasar la imagen a su negativo. La rutina es muy similar a la que vimos en la escala de grises. Existe un código que pudimos simplificar, pero por cuestiones de claridad lo reagrupamos en la función, a expensas de que dupliquemos un poco el código. En el formato RGB, cada canal tiene un valor posible de 0 a 255. Esto es porque se almacena en un byte, que tiene ocho bits, y la combinación de 2 elevada a la 8 potencia es 256. Así que si restamos 255 al valor del canal, por ejemplo si el rojo tiene un valor de 50 (bajo), con esta resta quedará un valor de 205 (alto). Al realizar esta resta en cada canal el resultado es una imagen en inverso o negativo. Comente el llamado a la función procesaGrises() (no la borre porque más adelante la necesitaremos) y efectúe el llamado a la función procesaNegativo(). Guarde su archivo y ejecútelo en el navegador.

10.4 Aclarar la imagen Con la misma lógica, la combinación de los colores llamados de luz nos da el blanco. Con los colores que no son de luz, la mezcla de todos ellos nos dará un color cercano al negro. Por lo tanto, si cada uno de los elementos de los canales se acerca al valor de 255, la imagen será más “clara”. Así que si sumamos una cantidad, digamos 100, la imagen se aclarará. Abra el archivo canvasImagenesNegativo.html y guárdelo como canvasImagenesAclarar.html.

10.5 Oscurecer una imagen Para oscurecer una imagen debemos acercarla al negro, es decir, acercarla al valor cero en cada uno de los canales de color, por lo cual debemos efectuar el proceso contrario, es decir, restarle a cada byte de cada pixel una cantidad (en este caso también es cero, pero usted la puede variar). Primero, abra el archivo de la sección anterior y renómbrela como canvasImagenesOscurecer.html. Recuerde comentar el llamado a la función procedeAclarar() (no lo borre) y llame a la función procedeOscurecer(). Guarde su archivo y ejecútelo en un navegador. Deberá ver la imagen considerablemente más oscura.

10.6 Una foto con contraste Un método muy utilizado es el de emplear para cada canal un valor entre 0 (cero porciento) y 1000 (cien porciento) y un valor de desplazamiento(Offset). Con estos valores modificaremos los valores de los canales de color y del alfa. Por lo general nombramos el factor como “a” y lo relacionamos con el color del canal, por ejemplo ra, es rojo (por red) y el factor, y el desplazamiento como “b”, y con su canal lo manejamos como rb, gb, bb y ab. Estos ocho valores los juntamos en un objeto JavaScript como se muestra en el siguiente listado, junto con un ciclo genérico para multiplicar el valor del canal y sumarle su desplazamiento. No olvide comentar la llamada al filtro anterior y escribir la llamada a la función procesaContraste(). Salve su archivo y ejecútelo en un navegador (menos Chrome, que le mandará un error de “Dominios Cruzados” o “Crossdomain”, como ya se explicó).

10.7 Filtros de colores Abra el archivo de la sección anterior y renómbrelo como canvasImagenesColores.html. En éste escribiremos las funciones para hacer la imagen con filtros rojo, verde y azul. Ya sistematizando los filtros con este método, nos es muy sencillo hacer variaciones; por ejemplo, podríamos realizar diferentes cambios en el alfa, pero eso lo veremos en la próxima sección. Comente la llamada a la rutina de la sección anterior y escriba la llamada a cada una de las funciones que hemos creado (sólo una a la vez). Guarde su archivo y ejecútelo en un navegador. Podrá observar la imagen con los diferentes filtros.

10.8 Crear un efecto en el alfa Bastará con dejar los demás parámetros de los canales de colores iguales (a = 100) y los desplazamientos en cero, pero modificar el valor del “a” en alfa en el porcentaje que deseamos cambiar la transparencia (100 completamente opaco y 0 completamente transparente). Para poder hacer el efecto de transparencia necesitamos pasar un valor entre 0 y 100 a la función y a la vez introducirlo a nuestro objeto. Abra el archivo de la sección anterior y guárdelo como canvasImagenesAlfa.html. Comente la llamada a la rutina de la sección anterior y escriba la llamada a función procesaAlfa() con parámetros entre 0 y 100. Guarde su archivo y ejecútelo en un navegador. Podrá observar la imagen con los diferentes grados de transparencia.

Crear un filtro genérico, archivo canvasImagenesAlfa.html

10.9 Realizar un efecto de flip horizontal Vamos a utilizar un algoritmo muy creativo (y muy viejo) que es encontrar el punto medio de la imagen y pasar los pixeles de la izquierda a la derecha y viceversa. Necesitaremos dos ciclos: uno para recorrer la imagen en forma horizontal y otro para pasar la imagen en forma vertical. Otra de las cosas ingeniosas en este algoritmo es determinar los puntos que vamos a intercambiar, calculando las distancias dentro de un arreglo que es lineal (1d), con una imagen que es una colección de puntos en dos planos (2d). Comente la llamada a la rutina de la sección anterior y escriba la llamada a función flipHorizontal(). Guarde su archivo y ejecútelo en un navegador.

10.10 Crear un menú para los filtros El objetivo es que el usuario pueda seleccionar entre los diferentes filtros y efectos que hemos creado. Para ello, nos valdremos de los elementos de HTML y los comunicaremos mediante JavaScript. Como bien dicen «la única forma de aprender a programar, es Programando». Rutina para el flip horizontal, archivo canvasImagenesFlip.html

10.11 Limpiar y guardar la imagen Para finalizar nuestra aplicación, realizaremos las funciones de limpiar la zona derecha del canvas y almacenar la imagen modificada. Abra el archivo de la sección anterior y guárdelo como canvasImagenesLimpia.html. La rutina para limpiar el lado derecho del lienzo es muy sencilla. Utilizaremos: