Usando o JavaScript para mostrar uma versão em escala cinza de uma imagem no mouse-over

Question

Eu preciso de uma maneira de exibir uma versão em escala de cinza de uma imagem em mouseover. Eu já vi isso implementado usando a funcionalidade Canvas do navegador, mas não quero usar esse método, pois demorará um tempo antes que a tela seja implementada em todos os navegadores.

Alguém fez uma coisa dessas?

Answer 1

Se você não usa tela e não deseja utilizar recursos específicos do navegador, precisará gerar suas imagens em escala de cinza no servidor. Antes ou sob demanda. Como fazer isso tem sido respondeu em outro lugar em So

Answer 2

Supondo que, como Reko_T comentou, você não pode simplesmente criar versões em escala de cinza das imagens no servidor por algum motivo, é possível no IE usando o proprietário filter Atributo css, Basicimage com escala de cinza. Você não precisa de JS para fazer isso, ele pode ser declarado no 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);
}

Em Firefox, você poderia Aplique uma máscara SVG, ou você pode tentar usar o elemento Canvas.

No entanto, a solução mais simples pode ser criar manualmente versões em escala de cinza de suas imagens ou fazer o lado do servidor com algo como GD.

Answer 3

Encontrado na rede:

HTML 5 apresenta objeto de tela que pode ser usado para desenhar e manipular imagens

O script:

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();
  }

O uso:

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

Testes aprovados usando:

• Firefox 3.5.4
• Chrome 3.0
• Safari 4.0

Os testes falharam usando:

• Internet Explorer 6
• Internet Explorer 7

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