Использование javascript для отображения серого варианта изображения при наведении на мышь

Question

Мне нужен способ отображения черно-белой версии изображения на mouseover. Я видел, как это реализовано с использованием функции Canvas в браузере, но не хочу использовать этот метод, поскольку это будет некоторое время, прежде чем холст будет реализован во всех браузерах.

Кто-нибудь сделал такое?

Answer 1

Если вы не используете Canvas и не хотите использовать специфичные для браузера функции, вам понадобится генерировать ваши изображения в оттенках серого на сервере. Либо заранее, либо по требованию. Как это сделать answered elsewhere on SO

Answer 2

Найдено в сети:

HTML 5 представляет объект Canvas, который можно использовать для рисования и манипулирования изображения

Сценарий:

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

Использование:

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

пройденных тестов Использование:

• FireFox 3.5.4
• Хром 3,0
• Сафари 4.0

Тесты Failed Использование:

• Internet Explorer 6
• Интернет Explo RER 7

Ресурсы: http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

Answer 3

Предполагая, что reko_t прокомментировал, вы не можете просто создать полутоновых версии изображений на сервер по какой-то причине, возможно в IE, используя запатентованную filter CSS-атрибут, BasicImage with grayScale. Вам не нужно JS, чтобы сделать это, он может быть объявлен в 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); 
} 

В Firefox, вы могли бы apply an SVG mask, или вы можете попробовать использовать элемент холста.

Однако самым простым решением может быть либо вручную создать версии изображений в виде шкалы серого, либо сделать это на стороне сервера с чем-то вроде GD.