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

Posted 2023-02-23

【中文标题】在 CSS 或 JavaScript 中反转图像的颜色

【英文标题】：Invert colors of an image in CSS or JavaScript

【发布时间】：2012-10-30 19:39:38

【问题描述】：

如果可能，我如何在 css 或 javascript 中反转图像 (jpg/png..) 的颜色？

Previousrelated 问题不够详细。

【问题讨论】：

可以使用html5画布。见this tutorial。

【参考方案1】：

CSS3 有一个新的过滤器属性只能在 webkit 浏览器中使用 supported 在 webkit 浏览器和 Firefox 中。它在 IE 或 Opera mini 中不支持：

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

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

【讨论】：

不适用于 Firefox 16.0.2。但是here 我发现这可以工作：filter: url(data:image/svg+xml;base64,PHN2Z...<long address>...PC9zdmc+#invert);，可以吗？

那是因为 firefox 不是 webkit。您需要检查浏览器是否为 webkit，否则通过 base64 转换进行反转。

你说得对，它在 Chrome 中确实有效。我很确定这应该在 Firefox 中工作，如 here: 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>"); 所说，但它没有......任何想法？

不错，但是很崩溃。它会反转颜色，但是当我将鼠标移到我的页面上时，选项卡会崩溃。用 Google Chrome 25.0.1364.172 x86_64 Linux 试了一下。

作为旁注，可以考虑使用 contrast(0.1)` 过滤器。

【参考方案2】：

可以使用下面的代码在主要的新浏览器中完成

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

但是，如果您希望它可以在所有浏览器上运行，则需要使用 Javascript。像this gist 这样的东西就可以完成这项工作。

【参考方案3】：

您可以通过 javascript 应用样式。这是下面的 Js 代码，它将过滤器应用于 ID 为 theImage 的图像。

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

这就是

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

现在你需要做的就是调用 invert() 我们在点击图片时执行此操作。

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>

我们在website 上使用它

【参考方案4】：

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