在JavaScript中更改图像的颜色

Question

在JavaScript中更改图像的颜色

javascript

9

我想动态改变地图图片的颜色（比如从蓝色变成红色）。由于需要支持IE浏览器，所以无法使用canvas。您有什么办法可以使用javascript在客户端上操作图片吗？

- user88071

4个回答

3

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

现在更改图像的className应该替换所显示的图像，无需客户端进行糟糕的聪明操作。

- AnthonyWJones

1

目前IE 9及以上版本支持canvas，因此可以将图像转换为canvas并在IE中进行操作。

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

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

这里有一个互动的演示，你可以自由地试玩。

查看使用文档非常简单。文档

- Nicholas TJ

1

根据你需要做什么，你可以使用纯CSS来移动背景图片的视口。看看这个网站的顶部导航菜单：http://grotonhomesforsale.com

看看当你将鼠标悬停在上面时，文本下面的图像如何变化？你也可以用不同的图像做同样的事情。

- mkoryak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JPot · Accepted Answer

如果颜色过渡非常极端（即没有太多微妙的渐变），您可以为图像的彩色部分创建一个透明的“孔”（使用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的vml来实现。但如果只是简单的颜色更改，这个技巧可能就足够了。