Recortar imágenes con Javascript y Canvas: Todos hemos utilizado alguna vez las aplicaciones para recortar imágenes que las redes sociales como las que Facebook o Google+ nos ofrecen, ¿cómo lo hacen?. Ellos tienen sus métodos pero aquí yo les ofrezco uno, utilizando Canvas y la mágica librería de esta API KineticJS.
Probablemente una buena analogía para explicar la potencia de KineticJS es que significa para Canvas lo que jQuery para javascript, todo es más fácil y el código es más fluido, pero regresemos a lo que nos corresponde.
Hace algo de tiempo escribí un post con varios tutoriales en los que se describía el poder de Canvas para el manejo de imágenes, ¿qué tanto potencial tiene eso? He aquí algo de la prueba, en unas cuantas líneas de javascript tienes funcionando una aplicación para recortar cualquier imagen de la forma que quieras, claro, siempre y cuando sea un rectángulo, agrega a eso la habilidad de Drag and Drop de Kinetic y tendrás algo muy pero muy parecido a lo que los grandes de internet nos ofrecen como servicio.
El videotutorial es largo, pero si nunca has estado familiarizado con Kinetic puedes empezar ahora aprendiendo con un ejemplo práctico y funcional, además del resultado final que es lo que más importa. ¿Cómo funciona? Con el método getURL() que aprendimos en el Manejo Profesional de Canvas.
Aquí está la aplicación funcionando y el código en github
Probablemente una buena analogía para explicar la potencia de KineticJS es que significa para Canvas lo que jQuery para javascript, todo es más fácil y el código es más fluido, pero regresemos a lo que nos corresponde.
Hace algo de tiempo escribí un post con varios tutoriales en los que se describía el poder de Canvas para el manejo de imágenes, ¿qué tanto potencial tiene eso? He aquí algo de la prueba, en unas cuantas líneas de javascript tienes funcionando una aplicación para recortar cualquier imagen de la forma que quieras, claro, siempre y cuando sea un rectángulo, agrega a eso la habilidad de Drag and Drop de Kinetic y tendrás algo muy pero muy parecido a lo que los grandes de internet nos ofrecen como servicio.
El videotutorial es largo, pero si nunca has estado familiarizado con Kinetic puedes empezar ahora aprendiendo con un ejemplo práctico y funcional, además del resultado final que es lo que más importa. ¿Cómo funciona? Con el método getURL() que aprendimos en el Manejo Profesional de Canvas.
Aquí está la aplicación funcionando y el código en github
Comentaris
Publica un comentari a l'entrada