web-dev-qa-db-fra.com

Inverser les couleurs d'une image en CSS ou en JavaScript

Comment inverser les couleurs d'une image (jpg/png ..) en css si possible ou javascript?

PrécédentLes questions ne donnent pas assez de détails.

javascriptcsscolors
55
laggingreflex

CSS3 a un nouvel attribut de filtre qui ne fonctionnera que dans les navigateurs webkit supporté dans les navigateurs webkit et dans Firefox. Il n'a pas de support dans IE ou Opera mini:

img {
   -webkit-filter: invert(1);
   filter: invert(1);
   }
<img src="http://i.imgur.com/1H91A5Y.png">

128
toxicate20

Peut être fait dans les nouveaux grands broswers en utilisant le code ci-dessous

.img {
    -webkit-filter:invert(100%);
     filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

Cependant, si vous voulez que cela fonctionne sur tous les navigateurs, vous devez utiliser Javascript. Quelque chose comme ce Gist fera le travail.

10
Kareem

Vous pouvez appliquer le style via javascript. C'est le code Js ci-dessous qui applique le filtre à l'image avec l'ID theImage.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}

Et c'est le 

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>

Il ne vous reste plus qu'à appeler invert () lorsque nous cliquons sur l'image.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}
<h4> Click image to invert </h4>

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>

Nous l'utilisons sur notre site web

2
Sabba Keynejad

Pour inverser de 0 à 1 et inversement, vous pouvez utiliser cette bibliothèque InvertImages , qui prend en charge IE 10. J'ai également testé avec IE 11 et cela devrait fonctionner.

0
CodeMonkey