Использование JavaScript для показа серой версии изображения при наведении курсора - PullRequest
Новая
       25

Использование JavaScript для показа серой версии изображения при наведении курсора

1 голос
/ 29 октября 2009

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

Кто-нибудь делал такую ​​вещь?

Ответы [ 3 ]

3 голосов
/ 29 октября 2009

Предполагая, что, как прокомментировал 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 вы можете применить маску SVG или попробовать использовать элемент canvas.

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

2 голосов
/ 29 октября 2009

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

2 голосов
/ 29 октября 2009

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

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
  • Chrome 3.0
  • Safari 4.0

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

  • Internet Explorer 6
  • Internet Explorer 7

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

...