在CSS或JavaScript中反转图像的颜色

Question

如何在CSS或JavaScript中反转图像（jpg / png ..）的颜色？

之前的相关问题没有提供足够的细节。

- laggingreflex

---

你可以使用HTML5画布。请参考这个教程。 - user197508

Answer 1

CSS3的新滤镜属性在webkit浏览器和Firefox中得到支持。它不支持IE或Opera mini浏览器：

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

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

- toxicate20

---

在Firefox 16.0.2中无法工作。但是在这里我发现这可能会起作用：` - laggingreflex

那是因为Firefox不是WebKit浏览器。你需要检查浏览器是否是WebKit，否则通过base64转换进行反转。 - toxicate20

你说得对，在Chrome中确实可以工作。我相信这应该在Firefox中也能工作，就像这里所说的那样：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>");但是它并没有...有什么想法吗？ - laggingreflex

不错，但是它很容易崩溃。它可以反转颜色，但是当我将鼠标移动到页面上时，选项卡就会崩溃。我使用的是Google Chrome 25.0.1364.172 x86_64 Linux。 - panzi

作为一个附注，我们可以考虑使用对比度（0.1）滤镜。 - bric3

Answer 2

可以使用以下代码在大多数新浏览器中完成

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

但是，如果您希望它在所有浏览器上运行，您需要使用JavaScript。类似这个代码片段将能完成任务。

- Kareem

Answer 3

您可以通过JavaScript应用样式。以下是应用滤镜到ID为theImage的图像的Js代码。

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

And this is the

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

Now all you need to do is call invert() We do this when the image is clicked.

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>

We use this on our website

- Sabba Keynejad

Answer 4

对于从0到1的反转，您可以使用这个库InvertImages，它提供了对IE 10的支持。我也在IE 11上进行了测试，应该可以正常工作。

- omalyutin