在javascript中更改图像的颜色

Question

我想动态更改地图图像的颜色（例如从蓝色变为红色）。 而且我不能使用canvas，因为我必须支持IE.Any想法如何使用javascript在客户端操作图像？

Answer 1

如果颜色过渡是非常偏振的（即，没有很多细微的渐变变化），你可以为你图像的彩色部分制作一个透明的“洞”（使用8位png或gif格式来支持IE6） ），并将背景颜色设置为真实颜色：

<!-- mymap.png contains a transparent "hole" for color -->
<img id="colorme" src="mymap.png" style="background-color:red" />

<script>
// change the color to blue:
document.getElementById('colorme').style.backgroundColor = 'blue'
</script>

这并不能满足您“在客户端操纵图像”的要求。只有像canvas这样的东西以及IE-only vml的某些部分才能以任意方式操作图像。但如果这是一个简单的颜色变化，这个技巧可能就足够了。

Answer 2

将其作为服务器端并将其作为新资源获取，例如使用透明的间隔图像，并将实际图像URL作为背景图像属性放置在使用类名的集合CSS选择器中。

现在更改图像的className应该替换显示的图像，客户端不需要任何讨厌的聪明东西。

Answer 3

根据您的操作，您可以使用纯CSS移动背景图像的视口。看到这个网站的顶级导航菜单： http://grotonhomesforsale.com

看看当鼠标悬停在它上面时，文字下的图像会发生变化吗？你可以做同样的事情，但有不同的形象

Answer 4

目前IE支持从IE 9开始的画布，因此可以转换为画布并在IE中操作图像。

你可以考虑这个jquery插件。它易于使用。

$("#myImageID").tancolor();

有一个互动demo。你可以玩它。

查看有关用法的文档，非常简单。 docs