Tus Fotos Estilo Retro con HTML5 Canvas y Vintage.js

HTML5, JavaScript y Canvas están cobrando impulso en lo que respecta al procesamiento de imágenes. Solo han pasado unos días desde que le presentamos el complemento jQuery tiltShift.js, que, como puede adivinar fácilmente por su nombre, aplica el efecto popular de miniaturizar a cualquier imagen en la que lo dispare. Hoy te mostraremos vintage.js. Este complemento de jQuery, que también está disponible como servicio web, le permite dejar que sus imágenes se vean como si hubieran sido tomadas hace mucho tiempo. No solo hace ese bien, hace un trabajo fantástico.

Vintage.js: servicio web más galería

El desarrollador alemán Robert Fleischmann presenta una forma extremadamente flexible de exponer fotos al envejecimiento digital virtual. Muchos parámetros lo ayudan a ajustar los resultados. Si está pensando en implementar el complemento en su propio sitio web, pero no está seguro de sus capacidades, debe consultar el sitio web del proyecto. Esto también es cierto, si solo está buscando una manera rápida y fácil de darle un estilo retro a sus fotos.

Vintagejs.com proporciona una aplicación web, donde puede cargar sus propias imágenes, manipularlas a través de controles deslizantes de valor simples e incluso exponerlas al ojo público en una galería en constante crecimiento. Este último aspecto es totalmente opcional. La siguiente imagen muestra un posible resultado que vitage.js puede lograr:

Antes de aplicar un filtrado intenso, la imagen se veía así:

Consulte el servicio en línea. Notarás que la manipulación es cómoda y que estás trabajando en un entorno wysiwyg, al menos casi. Mirando la interfaz de usuario, te sentirás como en casa bastante rápido. No necesitas ninguna formación académica para usarlo:

Una vez que haya terminado de aplicar efectos a sus fotos, puede descargarlo y/o guardarlo públicamente en la galería en línea. Encontrarás miles de páginas con fotos allí. La calidad, por supuesto, como es habitual con el contenido generado por el usuario, varía…

Vintage.js: complemento para su propio sitio web

Una vez que se haya convencido de que vintage.js es lo suficientemente potente para sus necesidades, echemos un vistazo a la implementación técnica del complemento. Vintage.js requiere jQuery. Además, deberá incrustar el complemento y la hoja de estilo CSS que lo acompaña:

Vintage.js se llama solo una vez, lo que hace que esté disponible en general y sea fácil de mantener. Si desea invocarlo en una imagen, agregue la clase «vintage». De esa manera, el JavaScript identifica dónde activarse. La llamada a la función básicamente puede verse así:

Hay tres preajustes diferentes para elegir. Fácilmente adivinará lo que estos lograrán, como se llaman sepia, green y grayscale. Si te gusta más la flexibilidad o incluso eres un fanático del control, vintage.js también es para ti. No trabajará con un ajuste preestablecido, pasará parámetros personalizados a la llamada de función.

Al usar esta variante, se sentirá recordado de las posibilidades del servicio en línea. Si bien puede cambiar todos los parámetros que alteran las imágenes, también puede cambiar el formato del archivo. Una función de devolución de llamada le permite decidir qué pasos adicionales deben invocarse después de la ejecución de la tarea principal. Una llamada de función con una cantidad razonable de parametrización podría verse así:

Vintage.js funciona en todos los navegadores modernos y en Internet Exploder 9. Crucial es el soporte del elemento canvas. El desarrollador Robert Fleischmann le proporciona el complemento sin cobrar nada. Tanto el complemento como el servicio en línea se pueden usar de forma totalmente gratuita, tanto para proyectos personales como comerciales, ya que tiene doble licencia bajo MIT y GPL.

Enlaces relacionados:

• La aplicación web – vintagejs.com
• La galeria – vintagejs.com
• El repositorio – Github