在javascript中更改图像的颜色

Question

我想动态地改变地图图像的颜色(比如从蓝色到红色).我不能使用画布,因为我必须支持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 选择器集中。

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