Utilisation de javascript pour afficher une version en échelle de gris d'une image au-dessus de la souris

Question

J'ai besoin d'un moyen pour afficher une version en niveaux de gris d'une image sur mouseover. J'ai vu cela mis en œuvre en utilisant la fonctionnalité Canvas du navigateur, mais je ne veux pas utiliser cette méthode car il faudra un certain temps avant que le canevas ne soit implémenté sur tous les navigateurs.

Est-ce que quelqu'un a déjà fait une telle chose?

Answer 1

Si vous n'utilisez pas Canvas et que vous ne souhaitez pas utiliser les fonctionnalités spécifiques au navigateur, vous devrez générer vos images en niveaux de gris sur le serveur. Soit à l'avance ou sur demande. Comment faire Cela a été answered elsewhere on SO

Answer 2

Trouvé sur le net:

HTML 5 introduit objet toile 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 passés en utilisant:

• FireFox 3.5.4
• Chrome 3.0
• Safari 4.0

Tests Failed L'utilisation:

• Internet Explorer 6
• Internet Explo rer 7

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

Answer 3

En supposant, comme reko_t a commenté, vous ne pouvez pas créer des versions d'échelle de gris des images sur le serveur pour une raison quelconque, il est possible dans IE en utilisant le filter propriétaire Attribut CSS, BasicImage with grayScale. Vous n'avez pas besoin JS faire cela, il 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 pourriez apply an SVG mask, ou vous pouvez essayer d'utiliser l'élément canvas.

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