How do I invert colors of an image (jpg/png..) in either css if possible or javascript?
This question is related to
javascript
css
colors
CSS3 has a new filter attribute which will only work in webkit browsers supported in webkit browsers and in Firefox. It does not have support in IE or Opera mini:
img {_x000D_
-webkit-filter: invert(1);_x000D_
filter: invert(1);_x000D_
}<img src="http://i.imgur.com/1H91A5Y.png">You can apply the style via javascript. This is the Js code below that applies the filter to the image with the ID theImage.
function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}
And this is the
<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>
Now all you need to do is call invert() We do this when the image is clicked.
function invert(){_x000D_
document.getElementById("theImage").style.filter="invert(100%)";_x000D_
}<h4> Click image to invert </h4>_x000D_
_x000D_
<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>We use this on our website
For inversion from 0 to 1 and back you can use this library InvertImages, which provides support for IE 10. I also tested with IE 11 and it should work.
Can be done in major new broswers using the code below
.img {
-webkit-filter:invert(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}
However, if you want it to work across all browsers you need to use Javascript. Something like this gist will do the job.
Source: Stackoverflow.com