Comunidad de diseño web y desarrollo en internet

Manipulación de imágenes con Canvas en HTML5

Canvas tiene un enorme poder sobre la manipulación de imágenes, es capaz de acceder a la información de cada pixel que se encuentre en sí mismo, es decir, podemos acceder a los valores de cada canal del pixel siempre y cuando esté dibujado en Canvas.

El código de la aplicación pueden encontrarlo aquí, y el demo aquí.

Parte 1: el método drawImage()


De ahí que el manejo de imágenes en el lienzo no sea tan sencillo como parece. La mayoría de aquellos que nos hemos adentrado un poco en esta API conoceremos el método drawImage() con el que no sólo tenemos la posibilidad de dibujar imágenes, si no también la de escalarlas y deformar el tamaño de las mismas. Parece sencillo ¿no? La verdad es que lo es, pero sí no conoces el método drawImage, en el primer videotutorial se explica este método.

Esa es la parte sencilla y común. Pero ¿qué pasa si nos queremos ver más avanzados, si queremos ir más allá?

Parte 2: el método getImageData()



¿Quieres aprender a convertir tus imágenes a Sepia, Blanco y Negro e Invertir sus colores utlizando HTML5? Este método nos permite acceder a la información del lienzo dado un cuadro definido en el método, podemos entonces obtener el tamaño de dicho cuadro y un arreglo con la información de cada canal de color de cada pixel. Recordemos que cada pixel tiene un valor de rojo, uno de azul y uno de verde para formar la imagen, incluso un canal alfa para las transparencias. ¿Para qué quiero yo saber eso? Para poder realizar efectos como los que ves en esta aplicación que lograremos con el segundo videotutorial.


Parte 3: método toDataURL()



Y por último, pero no menos importante, para qué querría yo hacer esto si no puede tener la imagen que he editado, bien, Canvas es tan asombroso que nos regala un método para convertir la información que tiene en una imagen, ya sea jpg o png, este método toDataURL() se explica en el útlimo tutorial.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate