Todos hemos utilizado alguna vez las aplicaciones para recortar imágenes que las redes sociales como las que Facebook o Google+ nos ofrecen, Pero… ¿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 tiempo también aquí en HTML5facil tuvimos un tutorial en el que mostrábamos las capacidades de Canvas para manipular imágenes, y es precisamente de ahí de donde nos apoyaremos para realizar la aplicación, el método toDataURL() dibuja un rectángulo sobre el lienzo al extraer las imágenes.
El tutorial es largo, pero si quieres convencerte de querer seguirlo, checa primero el demo de la aplicación aquí, o si ya eres un programador experimentado puedes también leer el código que está disponible en github.
Antes de dejarte con el video tutorial quiero comentarte que es el resultado de la petición de uno de los usuarios de la comunidad que nos preguntó cómo podía hacerlo y bien, aquí está el tutorial. De modo que si tienes alguna duda o necesitas ayuda puedes dejarlo en los comentarios.
Hola, se ve muy interesante, pero los enlaces están muertos, podrías solucionarlos? Sería muy amable de tu parte, gracias!
Sí, ninguno de los dos enlaces sirve, están rotos al parecer. En uno me sale error 401 Not found. Y en el otro me sale esto: Failed to load page content. Alguna sugerencia de por qué pueda ser?