9

有没有办法使用 jQ 或一些插件为图像着色（应用色调）？谢谢你

4

4 回答 4

16

我能想到的最简单的方法是在图像上覆盖一个半透明的 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");
于 2010-12-11T09:16:22.513 回答
4

如果您想要一种简单的颜色，则 nico 的答案非常好 - 但是，如果您要对图像进行去饱和然后应用色调（例如，图像仅显示为绿色），那么您可以看看在图像处理中<canvas>

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

于 2010-12-11T09:51:57.127 回答
4

正如在动态改变图像颜色中已经提到的

看看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/

于 2011-11-23T13:20:01.893 回答
-1

我不确定您是否使用 PHP，但使用 JavaScript/jQuery 是不可能的。使用 PHP，您可以使用 GD 图像库在图像发送到客户端之前对其进行着色。这个线程应该有帮助:-)

此外，该论坛主题还讨论了 ImageMagick 来为图像着色。

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

詹姆士

于 2010-12-11T09:18:52.563 回答