A muchísimas personas nos encanta personalizar desde nuestro PC hasta las redes sociales, ya sea con diferentes formas, colores e incluso texturas. Actualmente con las modas y demás, muchos ya nos consideramos todos unos fotógrafos con el tema de las selfies y los reporteros de imágenes anónimos.
A quien no le ha dado por tomar una fotografía de un amanecer, selfie de las fiestas o tal vez una que otra cervecita que nos echamos en un momento de relajación, etc., Pues obviamente y con todo el movimiento social que hemos tenido la mayoría del mundo lo ha hecho. Ahora, es muy importante destacar la calidad de fotos tomadas de teléfonos celulares que cada vez va mejorando, pero obviamente la toma de una cámara es mucho mejor, generalmente las cámaras réflex son de uso profesional y permiten obtener una fotografía de calidad máxima y con unos arreglos más con CamanJS quedan mucho mejor.
Ustedes se preguntarán, ¿toda esta introducción a que lugar nos va a llevar? Pues bien, les cuento que les presentaré una herramienta que nos permite editar una fotografía fácilmente con canvas en HTML5 gracias a JavaScript, CamanJS.
¿Qué es CamanJS?
CamanJS significa es (ca)nvas (man)ipulation en Javascript. Es una combinación de una interfaz fácil de usar, con las técnicas de edición de imágenes/canvas avanzadas y eficientes. Es muy fácil de extender con nuevos filtros y plugins, y viene con una amplia gama de funciones de edición de imágenes, que actualmente sigue creciendo. Es una librería completamente independiente y funciona tanto en NodeJS como en el navegador.
¿Cómo lo uso en JavaScript?
En el código JavaScript haremos lo siguiente, observen bien los atributos que usamos:
Caman('#my-image', function () {
this.brightness(10);
this.contrast(30);
this.sepia(60);
this.saturation(-30);
this.render();
});
En HTML:
<img data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)" data-caman-hidpi="/path/to/image@2x.jpg" src="path/to/image.jpg">
Compatibilidad y ejemplos
Aunque la compatibilidad con los diferentes navegadores no es completa, soporta una buena cantidad de ellos:
- Google Chrome
- Safari 5+
- Firefox 4+
- Opera 10+
- Internet Explorer 9+
Como puedes observar es muy sencillo realizar la edición de fotos; te recomendamos ampliamente que le des una revisadita a los ejemplos (que son mucho más gráficos y a nivel navegador), así como la documentación (que por cierto es toda una API) para que no solo te quedes con lo que te hemos mostrado si no también practiques, busques y experimentes por ti mismo.
Visita el sitio web oficial de CamanJS
