Инвертировать цвета изображения в CSS или JavaScript

Как инвертировать цвета изображения (jpg/png ..) в css, если возможно, или javascript?Инвертировать цвета изображения в CSS или JavaScript

Previous related вопросы не дают достаточно деталей.

источник

2012-11-10 laggingreflex

Вы можете использовать html5 холст. См. [Этот учебник] (http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/). – user197508

111

CSS3 имеет новый атрибут фильтра ~~который будет работать только в браузерах webkit~~supported в браузерах webkit и в Firefox. Она не имеет поддержки в IE или Opera Mini:

img { 
 
    -webkit-filter: invert(1); 
 
    filter: invert(1); 
 
    }

<img src="http://i.imgur.com/1H91A5Y.png">

источник

2012-11-10 20:30:34 toxicate20

Не работает в Firefox 16.0.2. Но [здесь] (http://forum.userstyles.org/discussion/32770/inverting-map-images/p1) Я обнаружил, что это может сработать: 'filter: url (data: image/svg + xml; base64, PHN2Z. .. <длинный адрес> ... PC9zdmc + # инвертировать); ', не так ли? – laggingreflex

Ну, это потому, что firefox не webkit. Вам нужно будет сделать проверку, если браузер - webkit, а также инверсия через преобразование base64. – toxicate20

Вы правы, он работает в Chrome. Я уверен, что это должно работать в Firefox, как сказано [здесь] (https://developer.mozilla.org/en-US/docs/CSS/filter): 'filter: url (" data: image/svg + xml ; utf8, "); 'но это не ... какие-то идеи? – laggingreflex

Может быть сделана в новом крупном broswers используя код ниже

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

Однако, если вы хотите работать во всех браузерах вам нужно использовать Javascript. Что-то вроде this gist сделает эту работу.

источник

2015-04-09 11:59:44 Kareem

Для инверсии от 0 до 1 и обратно вы можете использовать эту библиотеку InvertImages, которая обеспечивает поддержку IE 10. Я также тестировал с IE 11, и он должен работать.

источник

2016-07-04 09:08:06 CodeMonkey

Вы можете применить стиль через javascript. Js ниже.

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

И это HTML

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

Теперь все, что вам нужно сделать, это инвертировать вызов()

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>

источник

2017-03-06 12:05:17

Инвертировать цвета изображения в CSS или JavaScript

ответ

Смежные вопросы