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.
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