Mit Javascript, um eine Graustufenversion eines Bild auf Mouseover zu zeigen,
-
10-07-2019 - |
Frage
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?
Lösung
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
Andere Tipps
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 .
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