1

我需要一种在mouseover. 我已经看到使用浏览器的 Canvas 功能实现了这一点，但不想使用该方法，因为在所有浏览器上实现 canvas 还需要一段时间。

有没有人做过这样的事情？

4

4 回答 4

3

假设，正如 reko_t 所评论的那样，由于某种原因，您不能只在服务器上创建图像的灰度版本，在 IE 中可以使用专有的filterCSS 属性BasicImage 和 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之类的东西。

于 2009-10-29T13:22:54.613 回答
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>

通过使用的测试：

  • 火狐 3.5.4
  • 铬 3.0
  • 野生动物园 4.0

测试失败使用：

  • 互联网浏览器 6
  • 互联网浏览器 7

资源： http ://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

于 2009-10-29T13:19:56.117 回答
2

如果您不使用 Canvas 并且不想使用特定于浏览器的功能，则需要在服务器上生成灰度图像。提前或按需。怎么做这已在其他地方得到解答

于 2009-10-29T13:23:21.127 回答
0 
img {
    mix-blend-mode: luminosity;
    background: #000;
}
于 2020-11-28T23:35:57.267 回答