Mit Javascript, um eine Graustufenversion eines Bild auf Mouseover zu zeigen,

Question

Ich brauche einen Weg, um eine Graustufenversion eines Bildes auf mouseover anzuzeigen. Ich habe gesehen, diese implementiert, um die Canvas-Funktionalität des Browsers aber nicht will, diese Methode verwenden, wie es wird eine Weile dauern, bis Leinwand auf allen Browsern implementiert ist.

Hat jemand getan, so etwas?

Answer 1

Wenn Sie nicht Canvas verwenden und nicht wollen, browserspezifische Funktionen zu nutzen, Sie gehen zu müssen, Ihre Graustufenbilder auf dem Server zu erzeugen. Entweder vorher oder auf Anfrage. Wie Das war zu tun, an anderer Stelle beantwortet auf SO

Answer 2

Unter der Annahme, wie reko_t kommentiert hat, können Sie nicht nur Graustufen-Versionen der Bilder auf dem Server aus irgendeinem Grunde zu schaffen, ist es möglich, im Internet Explorer das proprietäre filter CSS-Attribut, BasicImage Graustufen- . Sie müssen nicht JS müssen dies tun, kann es in CSS deklariert werden:

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, könnten Sie einen SVG-Maske anwenden, oder Sie könnten versuchen, die Leinwand mit Element.

Allerdings kann die einfachste Lösung sein, entweder manuell Graustufen-Versionen Ihrer Bilder zu erstellen, oder tut es Server-Seite mit so etwas wie GD .

Answer 3

im Netz gefunden:

  

HTML 5 führt Canvas-Objekt, das   zu ziehen und zu manipulieren, kann verwendet werden,   Bilder

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

Die Nutzung:

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

Tests bestanden mit:

• FireFox 3.5.4
• Chrome 3.0
• Safari 4.0

Tests fehlgeschlagen Verwendung:

• Internet Explorer 6
• Internet Explorer 7

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