jQuery:有一种方法可以将颜色(色调)应用于图像吗?

发布于 2024-10-07 06:51:44 字数 39 浏览 7 评论 0原文

有没有办法使用 jQ 或一些插件来为图像着色(应用色调)? 谢谢

there is a way to colour (apply tint) an image using jQ or some plugs?
thank you

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

失去的东西太少 2024-10-14 06:51:44

我能想到的最简单的方法是在图像上覆盖一个半透明的 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");

Simplest way I can think of is overlaying a semitransparent div over the image.

A little example:

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 (with 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");
家住魔仙堡 2024-10-14 06:51:44

如果您想要一种简单的颜色,nico 的答案很好 - 但是,如果您正在谈论降低图像的饱和度,然后然后应用色调(例如,图像仅呈绿色) )然后您可以使用 来查看图像处理

经过一番谷歌搜索后,我发现了这个专注于照片处理操作的画布库: com/meltingice/CamanJS" rel="nofollow">https://github.com/meltingice/CamanJS

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 then applying a tint (so that the image is only in green for example) then you can have a look at image manipulation with <canvas>

After some googling, I found this library for canvas that focuses on photo manipulation operations: https://github.com/meltingice/CamanJS

彡翼 2024-10-14 06:51:44

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

另外,< a href="http://www.sitepoint.com/forums/showthread.php?t=600376" rel="nofollow noreferrer">此论坛帖子也讨论了 ImageMagick 对图像进行着色。

如果您不会/不能使用 PHP,我很抱歉,但是 JavaScript 无法完成您想要的操作。

詹姆斯

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 thread should help :-)

Also, this forum thread talks about ImageMagick to tint the image as well.

I'm very sorry if you aren't/can't use PHP, however JavaScript can't do what you want.

James

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文