jQuery: there is a way to apply colour (tint) to an image?

Question

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

nico · Answer 1 · 2010-12-11T09:54:45.070

16

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");

edited Dec 11 '10 at 09:54

answered Dec 11 '10 at 09:16

nico

50,859
17
87
112

Nice idea - a simpler, faster solution to using GD/ImageMagick with PHP, especially if the OP can't use PHP! – Bojangles Dec 11 '10 at 09:20
Excelent idea! Worked great and saved me a lot of time using js colorizing libraries. – Ignacio Sep 30 '11 at 16:29
Here is a jsfiddle. http://jsfiddle.net/yewTq/ . Unfortch, this technique applies the tint to the area surrounding the image. – Billy Oct 25 '13 at 15:50
1

Warning: this will also brighten any black in the image to not-black. – Grant Birchmeier Jan 26 '16 at 19:28

score 4 · Answer 2 · answered Dec 11 '10 at 09:51

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

score 4 · Accepted Answer · edited May 23 '17 at 10:31

4

As already mentioned in Dynamically changing image colours

take a look at Pixastic (coloradjust)

https://github.com/jseidelin/pixastic

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

or PaintbrushJS (colour tint)

https://github.com/mezzoblue/PaintbrushJS

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

edited May 23 '17 at 10:31

Community

1
1

answered Nov 23 '11 at 13:20

score -1 · Answer 4 · edited May 23 '17 at 11:47

-1

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

edited May 23 '17 at 11:47

Community

1
1

answered Dec 11 '10 at 09:18

Bojangles

99,427
50
170
208

This isn't a link-only answer, but only barely, so other reviewers will probably opt to delete it. Include some content from those links if you want to save it. – Jeffrey Bosboom Feb 26 '15 at 02:23

jQuery: there is a way to apply colour (tint) to an image?

4 Answers4

Linked