Usando o JavaScript para mostrar uma versão em escala cinza de uma imagem no mouse-over
-
10-07-2019 - |
Pergunta
Eu preciso de uma maneira de exibir uma versão em escala de cinza de uma imagem em mouseover
. Eu já vi isso implementado usando a funcionalidade Canvas do navegador, mas não quero usar esse método, pois demorará um tempo antes que a tela seja implementada em todos os navegadores.
Alguém fez uma coisa dessas?
Solução
Se você não usa tela e não deseja utilizar recursos específicos do navegador, precisará gerar suas imagens em escala de cinza no servidor. Antes ou sob demanda. Como fazer isso tem sido respondeu em outro lugar em So
Outras dicas
Supondo que, como Reko_T comentou, você não pode simplesmente criar versões em escala de cinza das imagens no servidor por algum motivo, é possível no IE usando o proprietário filter
Atributo css, Basicimage com escala de cinza. Você não precisa de JS para fazer isso, ele pode ser declarado no 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);
}
Em Firefox, você poderia Aplique uma máscara SVG, ou você pode tentar usar o elemento Canvas.
No entanto, a solução mais simples pode ser criar manualmente versões em escala de cinza de suas imagens ou fazer o lado do servidor com algo como GD.
Encontrado na rede:
HTML 5 apresenta objeto de tela que pode ser usado para desenhar e manipular imagens
O 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();
}
O uso:
<img id="myImage" src="image.gif"
onload="javascript:grayscale(this, true);"></img>
Testes aprovados usando:
- Firefox 3.5.4
- Chrome 3.0
- Safari 4.0
Os testes falharam usando:
- Internet Explorer 6
- Internet Explorer 7
Recursos:http://www.permadi.com/tutorial/jcanvasgraycale/index.html