Wie invertiere ich die Farben eines Bildes (jpg/png ..) in CSS, wenn möglich, oder in Javascript?
Vorherige verwandte Fragen geben nicht genügend Details.
nachlaufender Reflex
Wie invertiere ich die Farben eines Bildes (jpg/png ..) in CSS, wenn möglich, oder in Javascript?
Vorherige verwandte Fragen geben nicht genügend Details.
vergiften20
CSS3 hat ein neues Filterattribut was nur in Webkit-Browsern funktioniert unterstützt in Webkit-Browsern und in Firefox. Es wird nicht in IE oder Opera mini unterstützt:
img {
-webkit-filter: invert(1);
filter: invert(1);
}
<img src="http://i.imgur.com/1H91A5Y.png">
Funktioniert nicht in Firefox 16.0.2. Aber hier Ich fand, das könnte funktionieren: filter: url(data:image/svg+xml;base64,PHN2Z...<long address>...PC9zdmc+#invert);
kann es?
– nachlaufender Reflex
10. November 2012 um 20:44 Uhr
Nun, das liegt daran, dass Firefox kein Webkit ist. Sie müssten überprüfen, ob der Browser Webkit ist, andernfalls führen Sie Ihre Inversion über die base64-Konvertierung durch.
– vergiften20
10. November 2012 um 20:46 Uhr
Du hast Recht, es funktioniert in Chrome. Ich bin mir ziemlich sicher, dass dies wie gesagt in Firefox funktionieren sollte hier: 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 tut nicht … irgendwelche Ideen?
– nachlaufender Reflex
10. November 2012 um 22:59 Uhr
Nett, aber sehr krass. Es invertiert die Farben, aber wenn ich die Maus über meine Seite bewege, stürzt der Tab ab. Habe es mit Google Chrome 25.0.1364.172 x86_64 Linux versucht.
– pansi
17. März 2013 um 22:29 Uhr
Als Randbemerkung kann man den Kontrast(0.1)`-Filter betrachten.
– Brice
11. Oktober 2019 um 11:12 Uhr
Kareem
Kann in den wichtigsten 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. Etwas wie dieses Wesentliche wird die Arbeit erledigen.
Sabba Keynejad
Sie können den Stil über Javascript anwenden. Dies ist der folgende Js-Code, der den Filter auf das Bild mit der ID theImage anwendet.
function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}
Und das ist die
<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>
Jetzt müssen Sie nur noch invert() aufrufen. Das machen wir, wenn auf das Bild geklickt wird.
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>
Wir verwenden dies auf unserem Webseite
Für die Invertierung von 0 nach 1 und zurück können Sie diese Bibliothek verwenden Bilder umkehrendas Unterstützung für IE 10 bietet. Ich habe es auch mit IE 11 getestet und es sollte funktionieren.
Sie können HTML5-Canvas verwenden. Sehen dieses Tutorial.
– Benutzer197508
11. November 2012 um 8:01 Uhr