Invertieren Sie die Farben eines Bildes in CSS oder JavaScript

69

Wie invertiere ich die Farben eines Bildes (jpg / png ..) entweder in CSS, wenn möglich oder in Javascript?

Frühere verwandte Fragen geben nicht genügend Details.

javascript css colors Laggingreflex
quelle
1
Sie können HTML5-Zeichenfläche verwenden. Siehe dieses Tutorial .
user197508

Antworten:

149

CSS3 hat ein neues Filterattribut Dies funktioniert nur in Webkit-Browsern wird in Webkit-Browsern und in Firefox unterstützt. In IE oder Opera mini wird es nicht unterstützt:

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

toxicate20
quelle
Funktioniert nicht in Firefox 16.0.2. Aber hier fand ich, dass dies funktionieren könnte: filter: url(data:image/svg+xml;base64,PHN2Z...<long address>...PC9zdmc+#invert);Könnte es?
Laggingreflex
4
Das liegt daran, dass Firefox kein Webkit ist. Sie müssten überprüfen, ob der Browser ein Webkit ist, andernfalls führen Sie Ihre Inversion über die base64-Konvertierung durch.
Toxicate20
2
Sie haben Recht, es funktioniert in Chrome. Ich bin mir ziemlich sicher, dass dies in Firefox funktionieren sollte, wie hier gesagt : filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='5' /></filter></svg>");aber es gibt keine Ideen?
Laggingreflex
1
Schön, aber es ist sehr krachend. Die Farben werden umgekehrt, aber wenn ich die Maus über meine Seite bewege, stürzt die Registerkarte ab. Versuchte es mit Google Chrome 25.0.1364.172 x86_64 Linux.
Panzi
Als Randnotiz kann man den Kontrast (0.1) `Filter betrachten.
Brice
11

Kann in großen neuen Browsern mit dem folgenden Code durchgeführt werden

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

Wenn Sie jedoch möchten, dass es in allen Browsern funktioniert, müssen Sie Javascript verwenden. So etwas wie das Wesentliche wird den Job machen.

Kareem
quelle
2

Sie können den Stil über Javascript anwenden. Dies ist der Js-Code unten, der den Filter auf das Bild mit der ID theImage anwendet.

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

Und das ist das 

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

Jetzt müssen Sie nur noch invert () aufrufen. Dies tun wir, wenn Sie auf das Bild klicken.

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>
Erweitern Sie das Snippet

Wir verwenden dies auf unserer Website

Sabba Keynejad
quelle
0

Für die Inversion von 0 nach 1 und zurück können Sie diese Bibliothek InvertImages verwenden , die Unterstützung für IE 10 bietet. Ich habe auch mit IE 11 getestet und es sollte funktionieren.

CodeMonkey
quelle