【发布时间】：2011-05-23 21:27:24
【问题描述】：
有没有一种方法可以使用 jQ 或一些插件为图像着色（应用色调）？ 谢谢
【问题讨论】：
【发布时间】：2011-05-23 21:27:24
【问题描述】：
我能想到的最简单的方法是在图像上覆盖一个半透明的 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");
【讨论】：
-
好主意 - 使用 GD/ImageMagick 和 PHP 的更简单、更快的解决方案，尤其是在 OP 不能使用 PHP 的情况下！
-
好主意！使用 js 着色库工作得很好，并为我节省了很多时间。
-
这是一个 jsfiddle。 jsfiddle.net/yewTq 。 Unfortch，这种技术将色调应用于图像周围的区域。
-
警告：这也会将图像中的任何黑色变亮为非黑色。
【讨论】：
nico 的答案非常好，如果您想要简单的颜色 - 但是，如果您要对图像进行去饱和处理并 然后 应用色调（以便图像仅在例如绿色）然后您可以使用<canvas>查看图像处理
经过一番谷歌搜索，我发现了这个专注于照片处理操作的画布库：https://github.com/meltingice/CamanJS
【讨论】：
我不确定您是否使用 PHP，但 JavaScript/jQuery 不可能。使用 PHP，您可以使用 GD 图像库在图像发送到客户端之前对其进行着色。 This thread 应该有帮助:-)
另外，this forum thread 谈到 ImageMagick 也可以为图像着色。
如果您不会/不能使用 PHP，我很抱歉，但是 JavaScript 不能做您想做的事情。
詹姆斯
【讨论】：
-
这不是一个仅链接的答案，但只是勉强，所以其他评论者可能会选择删除它。如果你想保存这些链接中的一些内容。