Geekly articles weekly

SVG过滤效果。 第3部分。使用feComponentTransfer的图像后代化效果

在本系列的第三部分中，您将学习feComponentTransfer的工作原理以及如何使用此功能强大的原始SVG过滤器对图像进行后期处理 。



拟议的系列文章“ SVG过滤效果”，作者：Sara Soueidan，是自由UI / UX界面开发人员，并且是黎巴嫩的许多技术文章的作者，重点关注SVG过滤器的工作，并包括以下文章：


SVG过滤效果


  1. SVG过滤效果。 第1部分。SVG过滤器101
  2. SVG过滤效果。 第2部分。用词形学概述文本
  3. SVG过滤效果。 第3部分。使用feComponentTransfer的图像后代化效果
  4. SVG滤镜效果：具有feComponentTransfer的双色调图像 。
  5. SVG滤镜效果：使用feDisplacementMap使文本与表面纹理一致


本文假定您已经熟悉SVG过滤器的基础知识，或者已阅读本系列的第一篇文章“ SVG过滤器101”。 如果您还没有这样做，请花几分钟时间填写您的知识库。


feComponentTransfer是功能最强大的SVG过滤器原语之一。 它使我们能够控制图形源的各个RGBA通道，从而使我们能够在SVG中创建Photoshop之类的效果。 在本文中，这是feComponentTransfer文章的第一部分，我们将熟悉此原语，并了解如何将其用于后代图像。


图像的海报化或粗糙化涉及将连续的颜色过渡转换为更少颜色的多个范围，以及从一种颜色到另一种颜色的急剧过渡。 最初是通过摄影过程创建海报来完成的。 - 维基百科 。

后幅化发生在整个图像中，但是在细微的颜色变化区域最明显。


事前发布JPEG照片（24位彩色或1670万色）的示例，与将其保存为GIF格式（256色）的结果形成对比
图_1。 海报化之前以JPEG格式（24位彩色或1670万色）的照片的示例，与以GIF格式（256色）保存的结果形成对比。 （来源：维基百科）


在本文中，我们将使用feComponentTransfer来减少图像中的颜色数量，从而创建出不错的海报效果，类似于在商业或图形海报设计中看到的效果。


使用** feComponentTransfer **将后代效果应用于左侧的图像，可减少此图像中的颜色数量（右侧）
图_2。 使用feComponentTransfer在左侧的图像上应用后代化效果会减少该图像（右侧）中的颜色数量。


但首先，请考虑技术基础...


FeComponentTransfer概览


feComponentTransfer原语允许您更改像素中存在的每个R ， G ， B和A分量。 换句话说， feComponentTransfer允许您以与图形输入中的alpha通道相同的方式独立地操纵每个颜色通道。 它使您可以精确控制亮度调整，对比度调整，色彩平衡或阈值设置。


RGBA组件通过执行这些组件的传递函数进行修改。 为此，每个组件都有自己的元素，称为传递函数元素 。 在整篇文章中，我将这些元素称为“ 组成元素 ”，即 与各个RGBA组件有关的元素。 这些元素嵌套在feComponentTransfer中 。 因此， feComponentTransfer除了放置单独的RGB组件元素外什么也不做。 RGBA组成元素是： feFuncR ， feFuncG ， feFuncB和feFuncA 。


组件元素中使用type属性来确定要用于修改此组件的功能的类型。 当前有五种类型的函数： identity ， table ， discrete ， linear和gamma 。 这些类型的功能用于修改R / G / B / A图形源的组件。 在本系列中，我们将研究它们中的大多数，并了解如何使用它们。


<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>">

对于每种功能，都有一个或多个属性，可让您指定有关所使用功能的其他信息。 例如， 线性函数具有“ 斜率”属性，该属性用于指示线性函数的斜率 ，该斜率属性将用于更改要应用其的组件。


您可以同时更改一个或多个组件 。 这意味着feComponentTransfer可以同时包含一个，两个，三个或所有组成元素。 您还可以彼此独立地更改通道，对每个组成元素应用不同的功能。


在不同的组件元素上使用各种功能的能力意味着您可以在最低像素级别上很好地控制图形源的颜色。 例如，您可以通过将红色和蓝色通道与两种新颜色进行匹配来更改它们，并保持绿色不变或仅增加其强度。 这种低级的组件管理意味着您可以使用几行代码将Photoshop之类的功能应用于浏览器中的图像。 我不认识你，但是我的（新手）设计师认为这很有趣！


示例：使用Alpha组件减少对象的不透明度


一个简单的实际示例是使用feFuncA组件元素来减少图形源的不透明度。 在本系列的第一篇文章中，我们了解了如何通过更改颜色矩阵中的alpha通道值来使用feColorMatrix来减少元素的不透明度。 我个人更喜欢使用feComponentTransfer进行此类工作。


对源应用以下过滤器，可以将此源的不透明度降低到0.5：


 <filter id="redOp"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> </filter>

上面我们提到，我们有五个不同的功能可用于控制RGBA组件。 table函数的类型通过将组件的值（在我们的示例中为alpha通道）与tableValues属性提供的一系列值进行匹配来工作 。


那是什么意思呢？


元素的Alpha通道通常在[0，1]范围内。 使用表函数并提供两个值：0和0.5，我们实质上是告诉浏览器将alpha范围[0，1]映射到新范围：[0，0.5]。 在这种情况下，不透明度降低了一半。



在下一篇文章中，我们将考虑一个更详细的表函数示例。 现在，我想阐明离散函数的类型。 因此，让我们看看它是如何工作的以及我们可以做什么。


图像后代化效果：使用离散功能减少图像中的颜色数量


如果仅使用一个组件，则离散功能可用于减少图像或组件中的颜色数量。 减少图像中的颜色数量意味着，您会看到更锐利的颜色过渡，而不是平滑的线性颜色变化，从而使图像看起来像条纹或颜色簇，从而产生看起来像海报的效果。


右侧的图像是左侧的图像的副本，已对其应用离散功能以将每个组件中的颜色数量减少至5
图_3。 右侧的图像是左侧的图像的副本，已对其应用离散功能以将每个组件中的颜色数量减少到5种。


在上图中，您可以看到颜色不是平滑过渡，而是急剧变化，创建了颜色条和簇，并且图像看起来更加“海报化”。


就个人而言， 离散函数使我想起CSS中的steps（）同步函数 。 与线性函数相比，逐步函数从一个值移动到另一个值，而不是在它们之间线性移动。


与table函数类似， 离散函数采用tableValues属性中指定的一系列值。 离散函数与表的区别在于使用这些值的方式。


使用tableValues ，可以为浏览器提供一个有限的值列表，必须使用该值列表映射颜色分量。 并且由于您提供了一个有限的值列表，所以您获得了有限数量的颜色，从而创建了原本是线性颜色过渡的颜色条和簇。


此功能由tableValues属性中指定的功能步骤确定，该属性提供n个值的列表，以标识n个 步骤的步函数。— SVG过滤器规范

让我们简单地看一下这意味着什么。 假设我们有以下代码片段：


 <svg width="500" height="335" viewBox="0 0 500 335"> <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 .5 1" /> </feComponentTransfer> </filter> <image xlink:href="..."cwidth="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image> </svg>

在上面的代码片段中，我们使用离散函数来更改图像源中的红色通道。 我们提供了3种不同的值，浏览器必须将这些值与红色值相匹配。 在SVG滤波器中，组分值表示为[0，1]范围内的分数。 这意味着任何像素中红色分量的值可以是0（红色为0％/全黑），1（红色为100％）或它们之间的任何值（红色阴影）。 绿色，蓝色和Alpha通道也是如此。


对于您输入的任意数量的（ n ）个值，浏览器将创建n个范围。 更具体地说，它将[0，1]分为n个范围。 然后它将显示位于这些范围内的n个值之间的颜色值。 将此逻辑应用于我们的代码段：


  • 浏览器在tableValues中看到三个不同的红色值;
  • 它将[0，1]范围内的红色值分为三个相等的部分。 因此，我们的三个范围如下：
    • [0，0.33]
    • [0.33，0.66]
    • [0.66，1]
  • 此外，浏览器会检查图像中每个像素的红色值，并确定其位于哪个范围内。
  • 然后会显示一个范围的所有红色值，并提供您提供的与该范围关联的新值。 显示如下：
    • [0，0.33]范围内的颜色显示为0；
    • [0.33，0.66]范围内的颜色显示为0.5；
    • [0.66，1]范围内的颜色显示为1。

您也可以将此过程视为打开或关闭色调。 当您为颜色提供离散值时，您告诉浏览器仅包含这些值，并且如果像素包含的值不等于其中之一，则应将其关闭并替换为允许的值之一。 因此，例如，将0.8的颜色值视为已关闭，并将其替换为1（因为该值位于第三范围内）。


以下是此彩色显示器的手绘插图，当我想到它时便将其绘制出来。 也许您会派上用场。


将颜色值映射到范围颜色
图_4。 将颜色值映射到范围颜色。


到浏览器浏览图像中的所有像素时，您将用在tableValues中选择的少量红色值替换大量的红色值，从而用尖锐的过渡替换平滑的颜色变化，并且图像看起来好像是由群集或条纹的颜色。


以下是将上述代码段应用于具有大量红色的图像的演示。 通过限制图像像素中红色的数量并在其中一些像素中将红色清零，图像总体上呈现出明显的红色减少，尤其是在图像底部：



更改离散值的数量和/或更改值本身将更改总体结果。 您可能不希望将颜色值设置为0来消除图像的某些黑色区域。 例如，在上面的天空图像中，图像的后代化版本中可能不应有任何黑色的簇或条纹，因为它仍然是天空图像。 为此，您需要具有两种或三种以上的颜色，否则图像将丢失其大部分图像。


为了创建这种效果，我将RGB颜色的数量限制为五种，最低值从0.25开始：


 <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncG type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncB type="discrete" tableValues=".25 .4 .5 .75 1" /> </feComponentTransfer> </filter>

您可以在以下演示中发挥效果：



结论


我希望本文有助于使feComponentTransfer有所澄清，并向您展示如何强大的像素和组件颜色控件。


在下一篇文章中，我们将考虑两种更强大的feComponentTransfer传递函数类型。 我们将研究如何模拟两色调的Photoshop图像的效果，以及如何使用feComponentTransfer来控制图像的亮度，对比度和颜色强度。 和我们在一起。

Source: https://habr.com/ru/post/zh-CN439874/

More articles:


All Articles