Utilisation de javascript pour afficher une version en niveaux de gris d'une image au survol de la souris

Question

J'ai besoin d'un moyen d'afficher une version en niveaux de gris d'une image sur mouseover . J'ai déjà vu cela implémenté à l'aide de la fonctionnalité Canvas du navigateur, mais je ne souhaite pas utiliser cette méthode, car il faudra longtemps avant que Canvas soit implémenté sur tous les navigateurs.

Quelqu'un at-il fait une chose pareille?

Answer 1

Si vous n'utilisez pas Canvas et ne souhaitez pas utiliser les fonctionnalités spécifiques du navigateur, vous devrez générer vos images en niveaux de gris sur le serveur. Soit avant ou sur demande. Comment faire? Cela a été trouvé ailleurs sur le SO

.

Answer 2

En supposant que reko_t ait commenté, vous ne pouvez pas simplement créer des versions en niveaux de gris des images sur le serveur pour une raison quelconque, il est possible dans IE d'utiliser l'attribut propriétaire CSS filtre , BasicImage avec l'échelle de gris . Vous n'avez pas besoin de JS pour le faire, cela peut être déclaré 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);
}

Dans Firefox, vous pouvez appliquer un masque SVG ou vous pouvez utiliser le canevas. élément.

Cependant, la solution la plus simple peut être de créer manuellement des versions en niveaux de gris de vos images ou de le faire côté serveur avec quelque chose comme GD .

Answer 3

trouvé sur le net:

  

HTML 5 introduit l'objet Canvas qui   peut être utilisé pour dessiner et manipuler   images

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

L'utilisation:

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

Tests réussis avec:

• FireFox 3.5.4
• Chrome 3.0
• Safari 4.0

Échec des tests avec:

• Internet Explorer 6
• Internet Explorer 7

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