在javascript中更改图像的颜色

我想动态更改地图图像的颜色（例如从蓝色更改为红色）。

---

我不能使用canvas，因为我必须支持IE。知道如何使用javascript在客户端操作图像吗？

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

---

现在，更改图像的类名应该会替换显示的图像，不需要在客户端使用任何令人讨厌的聪明的东西。

根据您必须做的事情，您可以使用纯CSS来移动背景图像的视口。请参阅此站点的顶部导航菜单：

---

看看当你把鼠标移到它上面时，文本下的图像是如何变化的？您也可以做同样的事情，但使用不同的图像

如果颜色过渡非常偏振（即，没有太多细微的渐变变化），您可以为图像的彩色部分制作一个透明的“孔”（使用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>

//将颜色更改为蓝色：
document.getElementById（'colorme'）.style.backgroundColor='blue'

---

这并不能解决“在客户端操纵图像”的问题。以任意方式操作图像仅在canvas和仅IE vml的某些部分中才有可能。但是如果只是简单的颜色改变，这个技巧就足够了。

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

你可以考虑这个jQuery插件。它很容易使用

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

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

---

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

我使用了一个类似的jQuery插件，名为Color Picker，现在我的用户可以为他们的徽标选择自己的颜色woo-hoo！：D谢谢兄弟！我需要做一些非常类似的事情。你介意分享你的解决方案吗，plz？