Farben eines Bildes in CSS oder JavaScript umkehren

Lesezeit: 2 Minuten

Benutzer-Avatar
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.

  • Sie können HTML5-Canvas verwenden. Sehen dieses Tutorial.

    – Benutzer197508

    11. November 2012 um 8:01 Uhr


Benutzer-Avatar
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

Benutzer-Avatar
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.

Benutzer-Avatar
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.

1131140cookie-checkFarben eines Bildes in CSS oder JavaScript umkehren

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy