是否可以使用 JS/CSS 反转 png？答案

【问题标题】：Is it possible to invert a png with JS / CSS?是否可以使用 JS/CSS 反转 png？
【发布时间】：2016-11-10 19:43:54
【问题描述】：

我有一个带有一堆 png 图标的网站，它们都是黑白图像 - 白色背景上的黑色徽标。

目前我们有一个悬停效果，它隐藏第一个 png 并在后面显示一个倒置的 png，目前我们正在导出 2 个图像：1）白色背景上的黑色徽标，2）photoshop 背景上的白色徽标。

这让我想到是否可以用 JS 甚至新时代的 CSS 反转 png 文件？

（通过反转我的意思是将图像中的黑色换成白色，反之亦然白色换成黑色）

不幸的是，这些是我有 .png 文件的第 3 方图像，如果我将它们保存为 .svg，我知道我可以“即时”反转 .svg。

【问题讨论】：

您可以在 CSS 中使用 filter 属性，但仅在 webkit 浏览器中支持：stackoverflow.com/questions/17741629/invert-color-using-css
您可以在任何支持canvas 的浏览器上执行此操作，方法是将PNG 渲染到画布、获取图像数据（您可以将其作为像素获取）、反转像素并获取结果。我从来没有这样做过，但它应该是直截了当的。
这有点跑题了，但是当使用像 Cloudinary 这样的云图像服务时，您可以通过更改图像 URL 来应用许多过滤器；转换在服务器端完成，然后缓存（浏览器仍将其作为单独的图像处理）。 cloudinary.com/documentation/…（这叫：否定）
您可以通过在一些内联 SVG 中使用 SVG 图像标签和 SVG 过滤器来实现跨浏览器（包括 IE 10+）

【解决方案1】：

是的，使用来自 css 的过滤器。看下面的代码；

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

&lt;img src="https://newevolutiondesigns.com/images/freebies/black-white-background-1.jpg"&gt;

【讨论】：

【解决方案2】：

CSS 过滤器invert 功能运行良好。

【讨论】：