颜色到黑白 javascript 影响答案

【问题标题】：color to B/W javascript affect颜色到黑白 javascript 影响
【发布时间】：2010-01-06 23:32:47
【问题描述】：

是否有任何已知/简单/开源库提供一个javascript函数，它将显示在html页面中的彩色图片转换为黑白

可以在所有最常用的浏览器（IE、FireFox、Chrome）中使用吗？

我的意思是这样的：

<html>
...
<img id="myPic" src="pic.jpg">
...
<script type="text/javascript">
function onEvent(){
  var pic = document.getElementById("myPic");
  magicFunctionToBlackAndWhite(pic);
}
</script>
</html>

寻找那个 magicFunctionToBlackAndWhite()

【问题讨论】：

标签： javascript html image effect

【解决方案1】：

没有一种解决方案适用于所有浏览器，但您可以组合不同的解决方案：

对于 IE，使用以下 CSS：filter: Gray

很多其他浏览器都支持canvas，所以你应该可以use this javascript code。

当然，用 .net 等服务器端语言制作黑白图像应该不会太麻烦，因此您始终可以拥有一个原则上执行以下操作的 javascript：

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
    imgs[i].src = 'convertimage.aspx?img=' + imgs[i].src;
}

...然后让所有的魔法发生在服务器上。

【讨论】：

好的，看起来这里的示例 (permadi.com/tutorial/jsCanvasGrayscale/index.html) 可以完成这项工作。虽然我认为在更改图像的透明度时可以使用更优雅的东西：element.style.opacity

【解决方案2】：

这可能通过使用<canvas> 元素以某种方式实现，但我建议您自己制作黑白版本，手动或通过某种脚本。相信我——它会为您省去很多麻烦。

【讨论】：