jQuery：有一种方法可以将颜色（色调）应用于图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4416007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: there is a way to apply colour (tint) to an image?
提问by Dee
there is a way to colour (apply tint) an image using jQ or some plugs? thank you
有没有办法使用 jQ 或一些插件为图像着色（应用色调）？谢谢你
采纳答案by Daniel Ruf
As already mentioned in Dynamically changing image colours
正如在动态改变图像颜色中已经提到的
take a look at Pixastic(coloradjust)
看看Pixastic(coloradjust)
https://github.com/jseidelin/pixastic
https://github.com/jseidelin/pixastic
http://www.pixastic.com/lib/docs/actions/coloradjust/
http://www.pixastic.com/lib/docs/actions/coloradjust/
or PaintbrushJS(colour tint)
或PaintbrushJS（颜色色调）
https://github.com/mezzoblue/PaintbrushJS
https://github.com/mezzoblue/PaintbrushJS
回答by nico
Simplest way I can think of is overlaying a semitransparent div over the image.
我能想到的最简单的方法是在图像上覆盖一个半透明的 div。
A little example:
一个小例子：
HTML
HTML
<div id="overlay" class="overlay"></div>
<img id="myimg" src="img.jpg" />
CSS
CSS
.overlay
{
display: block;
position: absolute;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
}
JS (with JQuery)
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");
回答by David Tang
nico's answer is great if you're after a simple tinge of a colour - however, if you're talking about desaturating an image and thenapplying a tint (so that the image is only in green for example) then you can have a look at image manipulation with <canvas>
如果您追求的是简单的颜色色调，nico 的答案很好 - 但是，如果您正在谈论去饱和图像然后应用色调（例如，图像仅为绿色），那么您可以看看在图像处理中<canvas>
After some googling, I found this library for canvas that focuses on photo manipulation operations: https://github.com/meltingice/CamanJS
经过一番谷歌搜索，我找到了这个专注于照片处理操作的画布库：https: //github.com/meltingice/CamanJS
回答by Bojangles
I'm not sure if you're using PHP, but it's not possible with JavaScript/jQuery. With PHP, you can use the GD image library to tint the image before it's sent to the client. This threadshould help :-)
我不确定您是否使用 PHP，但 JavaScript/jQuery 不可能。使用 PHP，您可以在将图像发送到客户端之前使用 GD 图像库对图像进行着色。这个线程应该有帮助:-)
Also, this forum threadtalks about ImageMagick to tint the image as well.
此外，该论坛主题还讨论了 ImageMagick 对图像进行着色。
I'm very sorry if you aren't/can't use PHP, however JavaScript can't do what you want.
如果你不会/不能使用 PHP，我很抱歉，但是 JavaScript 不能做你想做的事。
James
詹姆士
