Come si invertono i colori di un'immagine (jpg/png ..) in entrambi i CSS se possibile o in javascript?Invertire i colori di un'immagine in CSS o JavaScript
Previousrelated domande non forniscono abbastanza dettagli.
CSS3 ha un nuovo attributo di filtro che funziona solo nei browser Webkitsupported nei browser Webkit e in Firefox. Non ha il supporto in IE o Opera Mini:
img {
-webkit-filter: invert(1);
filter: invert(1);
}<img src="http://i.imgur.com/1H91A5Y.png">Non funziona in Firefox 16.0.2. Ma [qui] (http://forum.userstyles.org/discussion/32770/inverting-map-images/p1) ho trovato che questo potrebbe funzionare: 'filter: url (data: image/svg + xml; base64, PHN2Z. ..
Beh, perché Firefox non è un webkit. Dovresti fare un controllo se il browser è webkit, altrimenti fai la tua inversione tramite la conversione di base64. – toxicate20
Hai ragione, funziona in Chrome. Sono abbastanza sicuro che questo dovrebbe funzionare in Firefox come detto [qui] (https://developer.mozilla.org/en-US/docs/CSS/filter): 'filter: url (" data: image/svg + xml ; utf8, "); 'ma non ... qualche idea? – laggingreflex
può essere fatto in nuove importanti browser citati usando il codice seguente
.img {
-webkit-filter:invert(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}
Tuttavia, se si desidera farlo funzionare su tutti i browser è necessario utilizzare Javascript. Qualcosa come this gist farà il lavoro.
Per l'inversione da 0 a 1 e viceversa è possibile utilizzare questa libreria InvertImages, che fornisce il supporto per IE 10. Ho anche provato con IE 11 e dovrebbe funzionare.
È possibile applicare lo stile tramite javascript. Codice Js sotto
function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}
e questo è l'html
<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>
Ora tutto quello che dovete fare è chiamare invertito()
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>
È possibile utilizzare canvas HTML5. Vedi [questo tutorial] (http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/). – user197508