Me enteré que la gente de HTML5 Fácil estaba bastante interesada en Canvas por lo que decidí sacar una nueva serie de tutoriales. Sé que les gustará porque créanme el resultado final es bastante bueno, de hecho lo pueden probar en el siguiente link:
http://dxvtuts.com/lab/grayScaleCanvas/grayCanvas.html
¿Qué es lo que aprenderemos?
Aprenderemos a insertar imágenes en Canvas:
Un tutorial bastante sencillo en el que veremos cómo colocar imágenes dentro del lienzo, para los conocedores de esta API les parecerá algo normal y fácil, pero para las personas que estamos iniciando creo que será interesante, aquí va el tutorial:
Esta es mi parte favorita, ¿Sabías que con Canvas podemos acceder a la información de cada pixel de la imagen? Bastante cool ¿no?
Ahora bien, ¿Para qué quiero yo saber la información de cada pixel? Buena pregunta, la necesitamos conocer para realizar efectos sobre nuestra imagen, como los que ves en la aplicación, convertir a blanco y negro, invertir colores, convertir a sepia, o bien, otros que no están ahí como el desenfoque, aumentar saturación, etc.
¿Cómo puedo hacer algo tan impresionante? Aquí está el tutorial:
Y por último, ¿de qué serviría poderle dar efectos a las imágenes si no podemos guardarlas? Para eso tenemos el último tutorial donde aprendemos a guardar imágenes que vienen de Canvas en formatos de imagen (png o jpeg). Aquí tienes el tutorial:
Y para complementar este post, el código de la aplicación está en github:
Que buenos tutoriales!
Muchas gracias, esperamos nos visites mas seguido y los compartas, saludos.