Efecto en imágenes con HTML5 y jQuery

Con HTML5 y jQuery las imágenes pueden ser manipuladas en escala de grises sin tener que utilizar un software de edición de imágenes.

Para conseguir este efecto, antes debíamos de tener 2 imágenes, la imagen en escala de grises y la imagen en color, ahora podremos hacer todo esto generando dinámicamente la imagen en escala de grises desde la fuente original. Pero como vale más una imagen que mil palabras os dejo una demo de cómo funciona este efecto que resulta muy atractivo.

ver demo

En cuanto al a compatibilidad, funciona con cualquier navegador que soporte HTML 5 y javascript, como Chrome, Safari y Firefox.

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").fadeIn(500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline- block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>

Como usarlo:

  • incluir una copia de jquery.js
  • pegue el código como se muestra arriba
  • establecer la imagen de destino (por ejemplo: . post-img, img, . img, etc)
  • puede cambiar la velocidad de la animación (es decir, 1000 = 1 segundo)

Vía: WebDesignerWall

Facebook
Twitter
LinkedIn
TAMBIÉN PUEDE INTERESARTE
Aprovechando la llegada de la Navidad, aportamos nuestro granito de arena con un interesante pack de 30 iconos navideños que Freepik (el buscador de recursos gráficos gratuitos) nos ofrece….
Hace varias semanas publicábamos una interesante colección de iconos creada por Victor Erixon. Pues bien, el amigo Victor a tenido a bien, crear una nueva colección de 80 mini…
Esta web utiliza cookies propias y de terceros para analizar nuestros servicios y mostrarle publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de sus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Más informaciónPersonalizar Cookies   
Privacidad