Convertir imágenes a escala de grises con jQuery

Uno de los efectos más utilizados históricamente relacionado a modificar el aspecto visual de una imagen es la de convertirla a blancos y negros, es un efecto sencillo y que produce una agradable sensación en los visitantes. En general para realizar este efecto se utilizan dos imágenes, una a todo color y otra igual pero convertida a escala de grises con algún programa de diseño.

crear imagen en blanco y negro con jQuery

Esta forma de realizar el efecto de rollover esta ampliamente extendida pero presenta algunos problemas básicos, uno de ellos es el peso de las dos imágenes, otro es el tiempo de carga y la demora que representa en el accionar, y finalmente, la incomodidad que es tener que duplicar todas las imágenes que tengan el efecto.

Una solución seria utilizar CSS Sprites, es una linda solución y no es complicada, pero existe otra alternativa aún más limpia y es la de utilizar jQuery para convertir las imágenes a escalas de grises automáticamente y sin demoras. Para lograrlo podemos utilizar Monocrome.

Monocrome es un plugin jQuery gratuito, muy fácil de usar, que nos permite crear en apenas unas lineas el famoso efecto rollover, convirtiendo una simple imagen a todo color a escala de grises.

Ejemplo de uso de Monocrome:

jQuery(function($){
//Si deseas convertir una imagen que este dentro de un elemento
	$('.wrap').monocrome();

//o si quieres convertir la imagen directamente
	$('img').monocrome({ isImage : true });
});

Eso es todo.

El plugin no solo permite crear efectos rollover sino que también cuenta con la posibilidad de convertir imágenes estáticas a escala de grises con tan solo una llamada al código.

Categorizado en: