Использование javascript для отображения версии изображения в сером цвете при наведении курсора мыши
-
10-07-2019 - |
Вопрос
Мне нужен способ отображения версии изображения в оттенках серого на mouseover
.Я видел, как это было реализовано с использованием функциональности Canvas браузера, но не хочу использовать этот метод, так как пройдет некоторое время, прежде чем canvas будет реализован во всех браузерах.
Кто-нибудь делал подобное?
Решение
Если вы не используете Canvas и не хотите использовать функции, специфичные для браузера, вам потребуется сгенерировать изображения в градациях серого на сервере. Либо заранее, либо по запросу. Как это сделать ответили в других местах на SO
Другие советы
Если предположить, что, как прокомментировал reko_t, по какой-то причине вы не можете просто создавать версии изображений на сервере в оттенках серого, это возможно в IE, используя собственный CSS-атрибут filter
, 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 или попробовать использовать холст элемент. р>
Однако самое простое решение может заключаться в том, чтобы либо вручную создавать версии изображений в оттенках серого, либо сделать это на стороне сервера с помощью чего-то вроде GD .
Найдено в сети:
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
- Сафари 4.0
Тесты Завершились Неудачно С использованием:
- Internet Explorer 6
- Internet Explorer 7
Ресурсы:http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html