Question

我需要创建一个自定义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应用的更有针对性的例子。

Answer 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>

Answer 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，它将在源图像上应用变换。如果我们将混合模式设置为'multiply'，那么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);

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

2 个答案: