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

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