ColorMatrix CSS 过滤器将黑白图像转换为双色调答案

【问题标题】：ColorMatrix CSS filter to convert black&white image to duotoneColorMatrix CSS 过滤器将黑白图像转换为双色调
【发布时间】：2013-01-09 15:16:51
【问题描述】：

我需要创建一个自定义 CSS 过滤器，它将黑白图像转换为具有两种自定义颜色的双色图像。

我想以这种方式应用过滤器（不确定这种语法是否可行，可能需要单独传递 6 个参数）：

.duotone {
    -webkit-filter: custom(none url(/filters/duotone.fs),
        black_color [255, 0, 0] white_color [255, 192, 203]);
}

在这种情况下，黑色被替换为红色，白色和透明色（背景）都被替换为粉红色，所有的灰色阴影被替换为中间的颜色（使用直线曲线）。

也许甚至可以在没有外部文件的情况下在 CSS 中定义过滤器？

此过滤器的应用是在运行时将黑白图标转换为彩色图标。

关于如何做到这一点的例子很少，this one 非常通用，涵盖了更广泛的过滤器，specification 也不是那么容易理解。

有人可以发布一个这样或类似的工作过滤器吗？或者至少您可以向我指出一些与我的情况相关的更集中的 ColorMatrix 应用示例。

【问题讨论】：

哇，我没有意识到 WebKit 过滤器是如此先进（您可以像在 WebGL 中那样定义着色器）。似乎您可以将每种颜色映射到 [0,1] 中的值，然后将这些值映射到任意渐变，尽管渐变越复杂，出现奇怪伪影的可能性就越大。无论如何，听起来您想要的都是可行的；如果没有人首先回答着色器明确定义的工作解决方案，也许我会试一试并幸运（但不是今晚）。
我也认为这是可行的，实际上我想要的更简单。由于我的图像是黑色/透明（蒙版），我只需将黑色和灰色阴影移动到另一种颜色及其阴影，白色可以保持原样。请参阅下面的答案 cmets...

标签： css colormatrix colormatrixfilter

【解决方案1】：

更新：

为此，您需要在 CSS 上使用 -webkit-mask-image。这曾经只是一个 webkit，但现在是 w3c css3。

支持仅存在于 webkit 上。为了保持向后兼容性并显示常规的黑色图标，您需要确定浏览器是否具有此功能。我已使用 modernizr 将其存档。

http://jsfiddle.net/kkobold/Zq5FZ/5/

旧答案：

我相信这就是您正在寻找的结果：

http://s7.postimage.org/vo5v33tuj/Screen_Shot_2013_02_03_at_11_28_46_PM.png

您可以通过过滤到棕褐色然后更改色调度来将其存档。不同的组合会产生不同的结果。但是简单的颜色可以为色调制作选择器，并为棕褐色制作幻灯片以增加或降低颜色变化的强度。

仅限 CSS3。

<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.0) hue-rotate(0deg);" width="300"/><br />
-webkit-filter: sepia(0) hue-rotate(0deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(50deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(50deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(100deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(100deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(150deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(150deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(200deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(200deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(250deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(250deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(300deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(300deg);
</div>
<div class="pull-left span4" >
<img src="/img/bw.jpg" style="-webkit-filter: sepia(0.8) hue-rotate(350deg);" width="300"/><br />
-webkit-filter: sepia(0.8) hue-rotate(350deg);
</div>

【讨论】：

谢谢。我会再次研究棕褐色。不过，这似乎是一个非常不同的过滤器。棕褐色不会改变黑白，黑色仍然是黑色，棕褐色后白色仍然是白色，灰色变成彩色。我需要一个滤镜，将 100% 黑色转换为我选择的一种颜色，将 100% 白色转换为另一种颜色，在此转换中这两种颜色之间有直线。用法如下 - 我有 BW 图标，我希望它变成，例如，粉红色背景上的红色图标。我认为我不能以某种方式“滥用”棕褐色来实现它:)
这就是你想要的吗？ jsfiddle.net/WHWnp。只需更改 .dashboard-buttons .sessions .img bg 颜色，它就会更改图标颜色。
谢谢，这正是我需要的。我花了很多时间搜索，但我只是不知道它是如何调用的......但这种方法的问题是，如果不支持蒙版，它不会显示任何内容，而我更希望它显示黑白图像 - 自定义过滤器将实现这一点。由于图像实际上不是黑白的，而是黑白的，它会在我需要的背景上显示为黑色。所以至少我需要一个过滤器来改变黑色，我们可以让白色保持原样......
这是一种更复杂的方法，使用 SVG stackoverflow.com/questions/11978995/… 另一个解决方案是使用modernizr (modernizr.com) 来测试掩码过滤器是否可用，如果不可用则添加一个类以向后兼容。 mask-image 是 w3c，所以它最终可能会出现。
谢谢。对不起，疯狂的一周。我可能会按照你的建议使用蒙版和黑色图像作为后备，SVG 太复杂了......

【解决方案2】：

在这里聚会有点晚了，但我已经为您构建了一个 CSS 自定义过滤器，它完全可以满足您的需求。所有代码都可以在 GitHub 上找到：https://github.com/awgreenblatt/css-custom-filters/tree/master/duotone

由于安全限制，自定义过滤器无法读取像素；他们只能对他们应用转换。因此，例如，过滤器不能说，如果像素是黑色的，则将其更改为红色。不过，还是有办法的。

每个颜色分量的范围为 [0,1]：源图像中的所有白色像素将是 (1, 1, 1, 1) 并且源图像中的所有黑色像素都是 (0, 0, 0, 1)

让我们调用您想要将黑色映射到的颜色：(br, bg, bb, 1) 以及要将白色映射到的颜色：(wr, wg, wb, 1)

您可以在片段着色器中定义一个 css_ColorMatrix，它将对源图像应用变换。如果我们将混合模式设置为“乘”，那么 css_ColorMatrix 将与当前源图像的颜色进行预乘。

所以，我们将 css_ColorMatrix 设置为：

wr - br,       0,       0,     0,
      0, wg - bg,       0,     0,
      0,       0, wb - bb,     0,
     br,      bg,      bb,     1

如果源像素是黑色的 (0, 0, 0, 1)，那么相乘的结果将是 (br, bg, bb, 1) 如果源像素是白色 (1, 1, 1, 1) 那么相乘的结果将是

((wr - br + br), (wg - bg + bg), (wb - bb + bb), 1) 要么 (wr, wg, wb, 1)

这是片段着色器源代码：

precision mediump float;

uniform vec3 black;
uniform vec3 white;

// Main

void main()
{
  vec3 b = black / 255.0;
  vec3 w = white / 255.0;

  css_ColorMatrix = mat4(w.r-b.r, 0.0, 0.0, 0.0,
                         0.0, w.g - b.g, 0.0, 0.0,
                         0.0, 0.0, w.b - b.b, 0.0,
                         b.r, b.g, b.b, 1.0);
}

顶点着色器只是默认的：

precision mediump float;

// Built-in attributes

attribute vec4 a_position;

// Built-in uniforms

uniform mat4 u_projectionMatrix;

// Main

void main()
{
  gl_Position = u_projectionMatrix * a_position;
}

然后您按如下方式应用过滤器：

-webkit-filter: custom(url(duotone.vs) mix(url(duotone.fs) normal source-atop), 
             1 1 border-box, black 255 0 0, white 255 192 203);

【讨论】：