Efecto Vintage en imágenes con jQuery y HTML5

VintageJS es un plugin jQuery que utiliza Canvas de HTML5 para agregar a cualquier fotografía un bonito efecto vintage. El plugin cuenta con tres efectos distintos que se pueden personalizar muy fácilmente.

efecto vintage jquery html5

Este plugin tiene como dependencia a jQuery, actualmente funciona con la ultima versión. Ademas, y como es de esperarse, necesita de un navegador que soporte el elemento HTML5 canvas.

VintageJS fue correctamente testeado en:Mozilla FireFox 3.16.14, Google Chrome 9.0.597.107, Safari 5.0.3, Opera 11.01 e Internet Explorer 9.

Efecto Vintage con jQuery + HTML5:

1. Añadimos las bibliotecas y hojas de estilo necesarias a nuestro proyecto:

<script src="src/jquery.js"></script> 
<script src="src/vintage.js"></script> 
<link rel="stylesheet" type="text/css" href="css/vintagejs.css" media="all" />

2. Inicializamos el plugin con una configuración basica:

<script> 
$(function () { 
    $('img.vintage').click(function () { 
        $(this).vintage(); 
    }); 
}); 
</script>

El plugin se encuentra diseñado de tal manera que podamos configurar todos los aspectos gráficos mediante la utilización de parámetros, un buen ejemplo de ello es el código que inserto a continuación en donde podrán ver perfectamente lo completo que es este fantástico recurso.

<script>
$(function () {
    $('img.vintage').click(function () {
        $(this).vintage({
            vignette: {
                black: 0.8,
                white: 0.2
            },
            noise: 20,
            screen: {
                red: 12,
                green: 75,
                blue: 153,
                strength: 0.3
            },
            desaturate: 0.05
        });
    });
});
</script>

Web: VintageJS

Categorizado en: