Usar javascript para mostrar una versión en escala de grises de una imagen al pasar el mouse

Question

Necesito una forma de mostrar una versión en escala de grises de una imagen en mouseover . He visto esto implementado usando la funcionalidad Canvas del navegador, pero no quiero usar ese método, ya que pasará un tiempo antes de que el lienzo se implemente en todos los navegadores.

¿Alguien ha hecho algo así?

Answer 1

Si no usa Canvas y no desea utilizar funciones específicas del navegador, deberá generar sus imágenes en escala de grises en el servidor. Ya sea de antemano o bajo demanda. Cómo hacerlo Eso ha sido respondido en otro lugar en SO

Answer 2

Suponiendo que, como ha comentado reko_t, no puede simplemente crear versiones en escala de grises de las imágenes en el servidor por alguna razón, es posible en IE usando el atributo CSS filter patentado, Imagen básica con grayScale . No necesita JS para hacer esto, puede declararse en CSS:

a {
    display: block;
    width: 80px;
    height: 15px;
    background-image: url(http://www.boogdesign.com/images/buttons/microformat_hcard.png);
}
a:hover {
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}

En Firefox, puede aplicar una máscara SVG , o puede intentar usar el lienzo elemento.

Sin embargo, la solución más simple puede ser crear manualmente versiones en escala de grises de sus imágenes, o hacerlo del lado del servidor con algo como GD .

Answer 3

Encontrado en la red:

  

HTML 5 introduce un objeto Canvas que   se puede usar para dibujar y manipular   imágenes

El guión:

function grayscale(image, bPlaceImage)
{
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");

  var imgWidth=image.width;
  var imgHeight=image.height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
  //  alert(imgWidth);
  myCanvasContext.drawImage(image,0,0);

  // This function cannot be called if the image is not rom the same domain.
  // You'll get security error if you do.
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);

  // This loop gets every pixels on the image and 
    for (j=0; j<imageData.height; i++)
    {
      for (i=0; i<imageData.width; j++)
      {
         var index=(i*4)*imageData.width+(j*4);
         var red=imageData.data[index];   
         var green=imageData.data[index+1];
         var blue=imageData.data[index+2];    
         var alpha=imageData.data[index+3];  
         var average=(red+green+blue)/3;      
        imageData.data[index]=average;    
         imageData.data[index+1]=average;
         imageData.data[index+2]=average;
         imageData.data[index+3]=alpha;       
       }
     }

    if (bPlaceImage)
    { 
      var myDiv=document.createElement("div"); 
         myDiv.appendChild(myCanvas);
      image.parentNode.appendChild(myCanvas);
    }
    return myCanvas.toDataURL();
  }

El uso:

<img id="myImage" src="image.gif" 
   onload="javascript:grayscale(this, true);"></img> 

Pruebas aprobadas usando:

• FireFox 3.5.4
• Chrome 3.0
• Safari 4.0

Las pruebas fallaron usando:

• Internet Explorer 6
• Internet Explorer 7

Recursos: http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html