Siempre me ha intrigado el fenómeno de Instagram y la rapidez con la que se hizo popular. Los filtros de fotos no son nada nuevo, pero el uso dinámico de estos filtros no siempre ha sido posible. Construir la funcionalidad en una aplicación iOS / Android requiere mucho tiempo. Afortunadamente, los desarrolladores han trabajado para replicar este proceso para la web usando JavaScript.
En este tutorial, quiero mostrar cómo construir una aplicación web sencilla de filtro de estilo Instagram con jQuery. La biblioteca se llama CamanJS, que se puede ampliar fácilmente para crear sus propios complementos de filtro. Esto no requiere jQuery, pero he elegido usarlo para un entorno de desarrollo más simple. Eche un vistazo a mi demostración de muestra en vivo para comprender el objetivo de este tutorial.
Demo en vivo - Descargar código fuente
Empezando
Primero descargué una copia local de jQuery junto con la biblioteca CamanJS en Github. Debo señalar que debe hospedar sus archivos en un servidor local o externo para poder probar los efectos de trabajo. Esto se relaciona con un problema con el host de origen de los elementos de Canvas que se vuelve bastante confuso si eres nuevo en la idea.
En resumen: no se sorprenda si abre los archivos localmente y no funcionan. Necesitarás tenerlos alojados en algún lugar para probar esto.
Mi archivo de índice tiene muchos comentarios adicionales relacionados con la forma en que puede implementar Caman. He creado una lista de enlaces de navegación que aplican filtros constantes sobre la imagen preexistente. A continuación hay una copia de todo mi cuerpo HTML:
Observa el comentario que oculta una imagen con el ID. #mainpic. Esto utiliza algunos atributos de datos HTML5 como datos-caman-hidpi y caman de datos. En realidad, puede establecer una serie de filtros predefinidos que se cargan inmediatamente en la foto. Esto genera un nuevo elemento de lienzo directamente en la página sin escribir ningún código JavaScript.
Pero como queremos profundizar un poco más, he creado un elemento lienzo solitario con el ID. #maincanvas. Esto se utilizará para cargar la foto y luego aplicar los filtros repetidamente hasta que se reinicie el lienzo.
Generando la imagen del lienzo
Abajo, en la parte inferior de mi página HTML, he escrito todo el JavaScript en un par de etiquetas Cada enlace tiene su propio controlador de eventos de clic para aplicar diversos grados de filtros en el lienzo.
La variable lona se dirige al elemento como un objeto jQuery, pero no es el elemento de lienzo natural. Obtenemos el propio lienzo utilizando lienzo [0] lo que es útil para adquirir detalles utilizando getContext (). En términos generales, este contexto nos permite escribir y reescribir objetos en el lienzo desde JavaScript. Los enlaces de filtro obtienen sus propias variables de jQuery para que podamos identificarlas rápidamente en cada evento de clic.
Cada vez que se hace clic en el botón de reinicio, el lienzo debe eliminar todos los filtros e incrustar la imagen en la página desde cero. Esto requirió mucha investigación para descubrir cómo despejar el lienzo de todo el contexto y luego agregar la imagen nuevamente sin ningún filtro CamanJS. Echa un vistazo a este post de desbordamiento de pila que se detalla un poco más.
Básicamente, estamos restableciendo el lienzo al mismo ancho / alto pero eliminando todo el contexto. El nuevo contexto se vuelve a dibujar al crear un elemento de imagen dinámico utilizando JavaScript. Caman tiene un método llamado revertir() para eliminar todos los filtros y volver a empezar.
Métodos de filtro
El resto de mi código está bloqueado en los controladores de eventos de clic. Esto significa que cada vez que un usuario hace clic en cualquiera de los enlaces de navegación, manejamos la función de manera diferente. He incorporado una serie de filtros predeterminados de Caman, pero hay muchos más que vale la pena explorar.
Estos son los primeros cuatro controladores de eventos que agregan brillo, ruido, contraste y color sepia a la foto. El valor numérico pasado en el método define cuánta fuerza del filtro se debe aplicar. Los números suelen oscilar entre 0 y 100, pero realmente dependen del método al que se llama.
La sintaxis es muy fácil de capturar una vez que la has visto. Caman () es el método de inicialización que primero toma el selector de lienzo, seguido de la imagen que se va a filtrar.Luego, dentro de una función de devolución de llamada, definimos qué filtros deben aplicarse. Los filtros se aplican en el lienzo de la imagen usando hacer().
Cada uno de estos filtros se compondrá con el tiempo. Por ejemplo, si hace clic dos veces en Sepia, obtendrá dos efectos de filtro repetidos utilizando tonos sepia. He mantenido todo a un valor inferior de 10-20 para que pueda observar la diferencia incremental.
Mi último evento de botón agrega una superposición de color muy leve en la imagen. Esto se comporta como un filtro de opacidad utilizando un color sólido como fondo. Tenga en cuenta que la sintaxis aceptará valores de color RGB o hexadecimales. Eche un vistazo a la funcionalidad incorporada de Caman para encontrar aún más efectos de filtro.
Demo en vivo - Descargar código fuente
Clausura
Probablemente no habrá demasiados proyectos en los que necesite replicar estos efectos fotográficos. Pero siempre es divertido jugar con las nuevas bibliotecas JS, y nunca se sabe cuándo podría ser aplicable. Siéntase libre de descargar una copia de mi código fuente y ver qué más puede construir. Además, si tiene alguna pregunta o comentario, suelte algunas ideas en los comentarios a continuación.