且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在javascript中更改图像的颜色

更新时间:2023-01-28 18:54:30

如果颜色过渡是非常偏振的(即,没有很多微妙的渐变变化),你可以为你的图像的彩色部分制作一个透明的洞(使用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.