jQuery：有一种方法可以将颜色（色调）应用于图像吗？

Question

有一种方法可以使用jQ或一些插头对图像进行着色（应用色调）吗？ 谢谢

Answer 1

我能想到的最简单的方法是在图像上覆盖半透明div。

一个小例子：

<强> HTML

<div id="overlay" class="overlay"></div>
<img id="myimg" src="img.jpg" />

<强> CSS

.overlay
    {
    display: block;
    position: absolute;
    background-color: rgba(200, 100, 100, 0.5);
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    }

JS（使用JQuery）

overlay = $("#overlay");
img = $("#myimg");
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");

Answer 2

nico的答案很棒，如果你是在一个简单的色彩之后 - 但是，如果你正在谈论对图像去饱和而然后应用色调（这样图像仅在例如绿色）然后你可以看看<canvas>

的图像处理

经过一些谷歌搜索后，我发现这个画布库专注于照片处理操作：https://github.com/meltingice/CamanJS

Answer 3

正如Dynamically changing image colours

中已提到的那样

看看 Pixastic （coloradjust）

https://github.com/jseidelin/pixastic

http://www.pixastic.com/lib/docs/actions/coloradjust/

或 PaintbrushJS （颜色色调）

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

Answer 4

我不确定你是否使用PHP，但是使用JavaScript / jQuery是不可能的。使用PHP，您可以使用GD图像库在图像发送到客户端之前对其进行着色。 This thread应该有所帮助： - ）

此外，this forum thread还讨论了ImageMagick以对图像进行着色。

如果你不能/不能使用PHP，我很抱歉，但JavaScript无法做你想做的事。

詹姆斯