在javascript中更改图像的颜色 [英] Change color of image in javascript

问题描述

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

I want to change the color of a map image dynamically (say from blue to red). And I can't use canvas as I have to support IE.Any idea how i can manipulate an image on client side using javascript?

推荐答案

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

If the color transitions are very polarized (ie, not a lot of subtle gradient changes), you can make a transparent "hole" for the colored part of you image (use the 8-bit png or gif format to support IE6), and set the background-color to the real color:

<!-- 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的某些部分才能以任意方式操作图像。但如果它是一个简单的颜色变化，这个技巧可能就足够了。

This does not address your quest to "manipulate an image on client side". Manipulating images in arbitrary ways is only possible with things like canvas, and some parts of IE-only vml. But if it's a simple color change, this trick might suffice.

这篇关于在javascript中更改图像的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！