Utilizzo di JavaScript per mostrare una versione in scala di grigi di un'immagine al passaggio del mouse

Question

Ho bisogno di un modo per visualizzare una versione in scala di grigi di un'immagine su mouseover . L'ho visto implementato usando la funzionalità Canvas del browser, ma non voglio usare quel metodo come sarà un po 'prima che il canvas sia implementato su tutti i browser.

Qualcuno ha fatto una cosa del genere?

Answer 1

Se non si utilizza Canvas e non si desidera utilizzare funzionalità specifiche del browser, sarà necessario generare le immagini in scala di grigi sul server. O in anticipo o su richiesta. Come fare Che è stato risposto altrove su SO

Answer 2

Supponendo che, come ha commentato reko_t, per qualche motivo non è possibile creare versioni in scala di grigi delle immagini sul server, è possibile in IE utilizzare l'attributo CSS filter proprietario, BasicImage con grayScale . Non hai bisogno di JS per farlo, può essere dichiarato in 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);
}

In Firefox, potresti applicare una maschera SVG oppure provare a usare la tela elemento.

Tuttavia, la soluzione più semplice potrebbe essere quella di creare manualmente versioni in scala di grigi delle immagini o farlo sul lato server con qualcosa del tipo GD .

Answer 3

Trovato in rete:

  

HTML 5 introduce l'oggetto Canvas che   può essere usato per disegnare e manipolare   immagini

Lo 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'utilizzo:

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

Test superati utilizzando:

• FireFox 3.5.4
• Chrome 3.0
• Safari 4.0

Test non riusciti utilizzando:

• Internet Explorer 6
• Internet Explorer 7

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