feColorMatrix_html/css_WEB-ITnoseの詳しい説明

昨年末に Spotify で共有されたテーマを見たことがありますか?画像の色処理を通じて、説得力のある視覚的な美的効果を実現します。

画像処理は非常に強力な処理メカニズムです。Web ブラウザーは Web フィルターを通じて画像の色を動的に処理し、プロジェクトを目立たせることができます。

CSS vs. SVG

今年初めにリリースされた CSSgram ライブラリは、CSS のフィルターとブレンド モードを使用して Instagram フィルターを再作成します。

CSS ブレンド モードを使用していくつかの修復を行うことができますが、CSS フィルターには大きな欠陥があり、各チャンネルを処理する重要な機能が欠けています。 CSS フィルターは非常に便利ですが (実際には SVG から派生したショートカット)、RGBA チャネルの制御は提供できません。 SVG (特に feColorMatrix) は、より強力な機能を提供し、CSS フィルターのレベルを直接高めて画像をより適切に処理し、より多くの特殊効果を取得します。

SVG フィルター

SVG の世界では、フィルター効果は接頭辞 fe- で表されます (つまり、「フィルター効果」)。さまざまな色効果だけでなく、ぼかしや 3D テクスチャも生成できます。 fe- 接頭辞という用語は少し曖昧ですが、この記事の後半で要約するのはすべて SVG フィルター効果に関するものです。

SVG フィルターの現在のブラウザ サポートは次のとおりです:

はい、IE9 または IE9 より前のブラウザとの互換性も必要でない限り、ほとんどの場合、SVG フィルターは十分にサポートされています。 CSS フィルターやブレンド モードと比較して、SVG フィルターのブラウザー サポートは比較的安定しています。ただし、Chrome v46 では乗算、差分、除外の問題しかない CSS ブレンド モードとは異なり、奇妙な問題もいくつかあります。

注: feConvolveMatrix などの一部の 3D フィルタリング エフェクトには、一部のブラウザで既知のバグがあります。この記事の主な焦点は feColorMatrix ですが、これは実行できません。また、どのブラウザでもパフォーマンスに多少の影響を受けることは避けられないことに注意してください。

フィルターの使用法

SVG フィルターの使用法は基本的に次のとおりです:

<svg>  <filter id="filterName">    // filter definition here can include    // multiple of the above items  </filter></svg>

SVG では、フィルターを宣言できます。ほとんどの場合、SVG defs を使用して必要なフィルターを宣言し、宣言されたフィルターを CSS で次のように使用できます。

.filter-me {  filter: url('#filterName');}

フィルターの URL は相対的なため、filter: url('../img /filter) .svg#filterName') と filter: url('http://una.im/filters.svg#filterName') は両方とも有効です。

feColorMatrix

カラー処理に関しては、feColorMatrix が最良の選択です。 feColorMatrix は、マトリックスを使用してカラーの各チャネルに影響を与えるフィルタリングの一種です (RGBA に基づいて)。Photoshop のチャネル編集と同じように考えることができます。

feColorMatrix は次のようになります (元の画像の RGBA 値のデフォルトは 1)。

<filter id="linear">    <feColorMatrix      type="matrix"      values="R 0 0 0 0              0 G 0 0 0              0 0 B 0 0              0 0 0 A 0 "/>    </feColorMatrix> </filter>

マトリックスは、RGBA 自体の各行の最終値を計算します。各 RGBA チャネルには独自の RGBA チャネルがあります。最後の値は乗数です。最後に、次のリストのように、RGBA 値が上から下に読み取られます:

/* R G B A 1 */1 0 0 0 0 // R = 1*R + 0*G + 0*B + 0*A + 00 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 00 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 00 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0

下の図はより鮮やかです:

RGB 値

Coloring

カラー チャネルを省略したり、混合したりできます。以下のように画像に色を付けます:

<!-- lacking the B & G channels (only R at 1) --><filter id="red">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   0   0   0   0            0   0   0   0   0            0   0   0   1   0 "/></filter><!-- lacking the R & G channels (only B at 1) --><filter id="blue"> <feColorMatrix    type="matrix"    values="0   0   0   0   0            0   0   0   0   0            0   0   1   0   0            0   0   0   1   0 "/></filter><!-- lacking the R & B channels (only G at 1) --><filter id="green">  <feColorMatrix    type="matrix"    values="0   0   0   0   0            0   1   0   0   0            0   0   0   0   0            0   0   0   1   0 "/></filter>

これは画像に緑のフィルターを追加しており、結果は次のようになります:

チャンネルの混合

RGB チャンネルを混合して画像に色を付けることによって固定色を取得することもできます:

<!-- lacking the B channel (mix of R & G)Red + Green = YellowThis is saying there is no yellow channel--><filter id="yellow">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   1   0   0   0            0   0   0   0   0            0   0   0   1   0 "/></filter><!-- lacking the G channels (mix of R & B)Red + Blue = Magenta--><filter id="magenta">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   0   0   0   0            0   0   1   0   0            0   0   0   1   0 "/></filter><!-- lacking the R channel (mix of G & B)Green + Blue = Cyan--><filter id="cyan">  <feColorMatrix    type="matrix"    values="0   0   0   0   0            0   1   0   0   0            0   0   1   0   0            0   0   0   1   0 "/></filter>

上記 たとえば、CMYK モードで色を混合する場合、赤のチャンネルを削除すると、緑と青がまだ存在することになります。緑と青を混ぜるとシアンが生成され、赤と青が混ぜるとマゼンタが生成されます。

@Justin McDowell はかつて HSL (色相、彩度、明度) 色について説明する記事を書きました。 SVG における明るさの値は明度を指すことも覚えておく必要があります。ここで、各チャンネルは明るさのレベルを保持します。たとえば、私たちが見る画像はマゼンタ色を保持します。

なぜ雲と明るさの領域がマゼンタになるのですか?以下の RGB カラー マップを見てください:

カラー値が欠落している場合、他の 2 つの値がそれを置き換えるために使用されます。たとえば、緑色のカラー チャネルがなければ、白、シアン、黄色は存在しません。実際には、それらは消えていません。明るさの値 (または alpha ) がまだ変更されていないだけです。これらのアルファ値を操作すると何が起こるか見てみましょう。

アルファ値

アルファ (4 番目の列) を通じて影と明るさを強調表示できます。次のように、4 行目はアルファ チャネルに影響し、4 列目は各チャネルの輝度値に影響します。

<!-- Acts like an opacity filter at .5 --><filter id="alpha">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   1   0   0   0            0   0   1   0   0            0   0   0   .5  0 "/></filter><!-- increases green opacity to be     on the same level as overall opacity --><filter id="hard-green">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   1   0   1   0            0   0   1   0   0            0   0   0   1   0 "/></filter><filter id="hard-yellow">  <feColorMatrix    type="matrix"    values="1   0   0   1   0            0   1   0   1   0            0   0   1   0   0            0   0   0   1   0 "/></filter>

次の例では、赤いマトリックスは 100% のアルファを青チャネルに追加します。また、赤色の値も保持し、青色になる赤色の痕跡と、青色と赤色の混合がマゼンタになる赤色の輝度値を上書きします。

りー

如果最后一个值小于 0 (变成 -1 )，就会得到相反效果。 blue 的痕迹就会变成 red 。下面就是取值为 -1 的效果：

<filter id="red-overlay">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   0   0   0   0            0   0   1  -1   0            0   0   0   1   0 "/></filter><filter id="identical-red-overlay">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   0   0   0   0            0   0   0   0   0            0   0   0   1   0 "/></filter>

把 -1 换成 .5 ，混合后颜色效果如下：

<filter id="blue-magenta-2">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   0   0   0   0            0   0   1  .5   0            0   0   0   1   0 "/></filter>

Blowing out channels

我们也可以通过第四行的个人通道影响整个 alpha 通道。示例中有一个蓝色的天空，可以将蓝色的天空变成白色，如下：

<filter id="elim-blue">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   1   0   0   0            0   0   1   0   0            0   0   -2   1   0 "/></filter>

下面演示几个混合通道的示例：

<!-- No G channel, Red is at 100% on the G Channel, so the G channel looks Red (luminosity of G channel lost) --><filter id="no-g-red">  <feColorMatrix    type="matrix"    values="1   1   0   0   0            0   0   0   0   0            0   0   1   0   0            0   0   0   1   0 "/></filter><!-- No G channel, Red and Green is at 100% on the G Channel, so the G Channel looks Magenta (luminosity of G channel lost) --><filter id="no-g-magenta">  <feColorMatrix    type="matrix"    values="1   1   0   0   0            0   0   0   0   0            0   1   1   0   0            0   0   0   1   0 "/></filter><!-- G channel being shared by red and blue values. This is a colorized magenta effect (luminosity maintained) --><filter id="yes-g-colorized-magenta">  <feColorMatrix    type="matrix"    values="1   1   0   0   0            0   1   0   0   0            0   1   1   0   0            0   0   0   1   0 "/></filter>

Lighten 和 darken

您可以通过将RGB值每个通道的值设置成小于 1 创建一个 darken 效果，反之，将每个通道值设置成大于 1 可以创建一个 lighten 效果。下图能清晰的阐述这一切：

矩阵效果如下：

<filter id="darken">  <feColorMatrix    type="matrix"    values=".5   0   0   0   0             0  .5   0   0   0             0   0  .5   0   0             0   0   0   1   0 "/></filter>

<filter id="lighten">  <feColorMatrix    type="matrix"    values="1.5   0   0   0   0            0   1.5   0   0   0            0   0   1.5   0   0            0   0   0   1   0 "/></filter>

GRAYSCALE

你可以在一列中设置shade的像素值创建出灰度效果。运用的通道位置不一样，可以得到不同的灰度值。比如下面几个示例：

<filter id="gray-on-light">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            1   0   0   0   0            1   0   0   0   0            0   0   0   1   0 "/></filter>

<filter id="gray-on-mid">  <feColorMatrix    type="matrix"    values="0   1   0   0   0            0   1   0   0   0            0   1   0   0   0            0   0   0   1   0 "/></filter>

<filter id="gray-on-dark">  <feColorMatrix    type="matrix"    values="0   0   1   0   0            0   0   1   0   0            0   0   1   0   0            0   0   0   1   0 "/></filter>

组合在一起

feColorMatrix 真正力量是能够混合多个通道，并且将这些概念运用到图像上产生一个新的图像效果。

<filter id="peachy">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0  .5   0   0   0            0   0   0  .5   0            0   0   0   1   0 "/></filter>

在 red 的通道上采用 1 ， green 通道上采用 0.5 ，而 blue 通道不在正常的位置上，而 alpha 设置为 0.5 。看到的效果是深蓝色的痕迹(shadows),突出的红色和一半亮度绿色的混合的中间色调。如果 red + green = blue 的话，那么 red + (green / 2) 能得到更多的 coral 色：

这是另一个示例：

<filter id="lime">  <feColorMatrix    type="matrix"    values="1   0   0   0   0            0   2   0   0   0            0   0   0  .5   0            0   0   0   1   0 "/></filter>

有这么多值得探索的值。 Rachel Nabors 的 Dev Tools Challenger 就是一个很好的示例。( 注： 需要使用Firefox浏览器打开)。

酷!科学！颜色过滤器!现在，你对这方面知识有一定的了解。你现在所需要的是需要自己的工具来创建你自己的效果。

如果你想了解更多的细节，建议你阅读 Amelia Bellamy-Royds 写的 一篇文章 ，文章阐述了 feColorMatrix 更多的细节。 Sara Soueidan 也写了 一篇文章 ,在SVG中使用CSS的blend modes模式创建图像效果。

filter效果的参考

如查你理解了 feColorMatrix 是什么，你就可以在此基础上创建一个工具来生成过滤器效果。下面提供一些 fe- 相关的选项，希望对你有所帮助，并且能做进一步的探索。

• feBlend :类似于 CSS blend modes ，描述了图像通过混合模式进行交互
• feComponentTransfer : 改变个人对RGBA通道的总称（如 feFuncG ）
• feComposite :一个原始的过滤器， 定义像素图像交互方式
• feConvolveMatrix ：这个过滤器规定像素与他近邻将关闭交互（如：模糊、锐化）
• feDiffuseLighting ：定义了一个光源
• feDisplacementMap : 使用另一个输入值( in2 )取代一个图像的像素值( in )
• feFlood : 完成过滤器的填充区域指定的颜色和 alpha 等级
• feGaussianBlur :输入的模糊值和标准值的偏差
• feImage ：使用其他的过滤器(像 feBlend 或 feComposite )
• feMerge ： 允许异步过滤效果应用，而不是分层
• feMorphology : 削弱或扩张源图像
• feOffset ：用来创建阴影
• feSpecularLighting : 通过 alpha 创建凹凸贴图，又将其称之为" 镜面 "( Phong Reflection Model )
• feTile : 指图像如何重复填补空间
• feTurbulence : 允许创建纹理

扩展阅读

• MDN Docs on feColorMatrix
• w3c Filter Docs
• Smarter SVG Filters
• feColorMatrix Overview on Web Platform
• SVG 研究之路 (11) - filter:feColorMatrix

本文根据 @Una Kravets 的《 Finessing feColorMatrix 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://alistapart.com/article/finessing-fecolormatrix 。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。