En la tercera parte de la serie, aprenderá cómo funciona feComponentTransfer y cómo puede posterizar imágenes utilizando este poderoso filtro SVG primitivo.

La serie de artículos propuesta, "Efectos de filtrado SVG", de Sara Soueidan, un desarrollador independiente de interfaz UI / UX y autor de muchos artículos técnicos con sede en Líbano, se centra en el trabajo de los filtros SVG y consta de los siguientes artículos:

Efectos de filtrado SVG

1. Efectos de filtrado SVG. Parte 1. Filtros SVG 101
2. Efectos de filtrado SVG. Parte 2. Esquema de texto con feMorfología
3. Efectos de filtrado SVG. Parte 3. Efecto de posterización de imagen usando feComponentTransfer
4. Efectos de filtro SVG: imágenes de duotono con feComponentTransfer .
5. Efectos de filtro SVG: conformar texto a textura de superficie con feDisplacementMap

Este artículo asume que ya está familiarizado con los conceptos básicos de los filtros SVG o que ha leído el primer artículo de esta serie: "SVG Filters 101". Si aún no lo ha hecho, no dude en dedicar unos minutos a completar su base de conocimientos.

feComponentTransfer es una de las primitivas de filtro SVG más potentes. Nos da control sobre los canales RGBA individuales de nuestra fuente de gráficos, lo que nos permite crear efectos como Photoshop en SVG. En este artículo, que es la primera parte del artículo sobre feComponentTransfer , nos familiarizaremos con esta primitiva y veremos cómo se puede usar para posterizar imágenes.

La posterización o engrosamiento de una imagen implica la conversión de una transición continua de color a varios rangos de menos colores, con transiciones nítidas de un color a otro. Inicialmente, esto se realizó mediante procesos fotográficos para crear carteles. - Wikipedia .

La posterización se produce en toda la imagen, pero es más evidente en el área de un cambio sutil de color.

Fig_1. Un ejemplo de una fotografía en formato JPEG (color de 24 bits o 16,7 millones de colores) antes de la posterización, en contraste con el resultado de su guardado en formato GIF (256 colores). (Fuente: Wikipedia)

En este artículo, utilizaremos feComponentTransfer para reducir la cantidad de colores en la imagen, lo que, a su vez, creará un agradable efecto de póster, similar a lo que vemos en los diseños de pósters comerciales o gráficos.

Fig_2. La aplicación del efecto de posterización a la imagen de la izquierda con feComponentTransfer reduce la cantidad de colores en esta imagen (derecha).

Pero primero, considere los fundamentos técnicos ...

FeComponentTransfer de un vistazo

La primitiva feComponentTransfer le permite cambiar cada uno de los componentes R , G , B y A presentes en un píxel. En otras palabras, feComponentTransfer le permite manipular independientemente cada canal de color de la misma manera que el canal alfa en la entrada de gráficos. Le permite controlar con precisión el ajuste de brillo, el ajuste de contraste, el balance de color o la configuración del umbral.

Los componentes RGBA se modifican realizando las funciones de transferencia de estos componentes. Para esto, cada componente tiene su propio elemento llamado Elemento de función de transferencia . A lo largo del artículo me referiré a estos elementos como " elementos componentes ", es decir, Elementos que se relacionan con componentes individuales de RGBA. Estos elementos están anidados en feComponentTransfer . Entonces feComponentTransfer no hace más que colocar elementos de componentes RGB individuales. Los elementos componentes de RGBA son: feFuncR , feFuncG , feFuncB y feFuncA .

El atributo type se usa en el elemento componente para determinar el tipo de función que desea usar para modificar este componente. Actualmente hay cinco tipos de funciones: identidad , tabla , discreta , lineal y gamma . Este tipo de funciones se utilizan para modificar los componentes de la fuente gráfica R / G / B / A. Veremos la mayoría de ellos en esta serie y veremos cómo se pueden usar.

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

Para cada tipo de función, hay uno o más atributos que le permiten especificar información adicional sobre la función utilizada. Por ejemplo, una función lineal tiene el atributo de pendiente , que se usa para indicar la pendiente de la función lineal que se usará para cambiar el componente al que se aplica.

Puede cambiar uno o más componentes al mismo tiempo . Esto significa que feComponentTransfer puede contener uno, dos, tres o todos los elementos componentes al mismo tiempo. También puede cambiar canales independientemente uno del otro, aplicando diferentes funciones a cada elemento componente.

La capacidad de usar varias funciones en diferentes elementos componentes significa que usted tiene un gran control sobre los colores de la fuente de gráficos en el nivel de píxel más bajo. Por ejemplo, puede cambiar los canales rojo y azul combinándolos con dos colores nuevos y dejar el verde sin cambios o solo aumentar su intensidad. Esta gestión de componentes de bajo nivel significa que puede aplicar características como Photoshop a las imágenes en su navegador usando unas pocas líneas de código. No sé sobre ti, ¡pero el diseñador (novato) en mí piensa que esto es súper interesante!

Ejemplo: uso de un componente alfa para reducir la opacidad de un objeto

Un ejemplo simple de la vida real es el uso del elemento componente feFuncA para reducir la opacidad de la fuente de gráficos. En el primer artículo de esta serie, vimos cómo feColorMatrix se puede usar para reducir la opacidad de un elemento cambiando el valor del canal alfa en la matriz de color. Personalmente prefiero usar feComponentTransfer para este tipo de trabajo.

La aplicación del siguiente filtro a una fuente reduce la opacidad de esta fuente a 0.5:

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

Mencionamos anteriormente que tenemos cinco funciones diferentes que podemos usar para controlar los componentes RGBA. El tipo de la función de tabla funciona haciendo coincidir los valores del componente, que es el canal alfa en nuestro ejemplo, con la serie de valores proporcionados por el atributo tableValues .

Entonces, ¿qué significa esto?

El canal alfa de un elemento generalmente se encuentra en el rango [0, 1]. Usando la función de tabla y proporcionando dos valores: 0 y 0.5, esencialmente le decimos al navegador que asigne el rango alfa [0, 1] al nuevo rango: [0, 0.5]. En este caso, la opacidad se reduce a la mitad.

Consideraremos un ejemplo más detallado de la función de tabla en el próximo artículo. Ahora quiero arrojar luz sobre el tipo de función discreta . Entonces, veamos cómo funciona y qué podemos hacer con él.

Efecto de posterización de imagen: reducción de la cantidad de colores en una imagen utilizando la función discreta

La función discreta se usa para reducir la cantidad de colores en una imagen o componente si solo se usa un componente. Reducir el número de colores en la imagen significa que, en lugar de un cambio de color lineal suave, verá transiciones de color más nítidas que hacen que la imagen se vea como rayas o grupos de colores, lo que conduce a un efecto que parece un póster.

Fig_3. La imagen de la derecha es una copia de la imagen de la izquierda, a la que se le ha aplicado una función discreta para reducir el número de colores a 5 por componente.

En la figura anterior, puede ver que en lugar de transiciones suaves, los colores cambian drásticamente, creando barras de colores y grupos, y la imagen se ve más "posterizada".

Personalmente, la función discreta me recuerda la función de sincronización de pasos () en CSS. En comparación con una función lineal, una función paso a paso se mueve de un valor a otro, en lugar de moverse linealmente entre ellos.

Al igual que la función de tabla , la función discreta toma una serie de valores como se especifica en el atributo tableValues . La función discreta difiere de la tabla en la forma en que utiliza estos valores.

Con tableValues , proporciona al navegador una lista finita de valores con los que debe asignar el componente de color. Y dado que proporciona una lista finita de valores, obtiene un número finito de colores, creando así barras de color y grupos que de otro modo serían transiciones de color lineales.

Esta función está determinada por los pasos de función especificados en el atributo tableValues , que proporciona una lista de n valores para identificar la función de paso de n pasos.— Especificación de filtros SVG

Veamos qué significa esto en términos simples. Supongamos que tenemos el siguiente fragmento de código:

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

En el fragmento de código anterior, usamos una función discreta para cambiar el canal rojo en la fuente de la imagen. Proporcionamos 3 valores diferentes con los que el navegador debe coincidir con los valores rojos. En el filtro SVG, los valores de los componentes se representan como fracciones en el rango [0, 1]. Esto significa que el valor del componente rojo en cualquier píxel puede ser 0 (0% rojo / completamente negro), 1 (100% rojo) o cualquier valor (tono de rojo) entre ellos. Lo mismo ocurre con los canales verde, azul y alfa.

Para cualquier número de ( n ) valores que ingrese, el navegador creará n rangos. Más específicamente, dividirá [0, 1] en n rangos. Luego mostrará los valores de color que se encuentran dentro de estos rangos en n valores. Aplique esta lógica a nuestro fragmento de código:

• el navegador ve tres valores rojos diferentes en tableValues ;
• divide los valores rojos en el rango [0, 1] en tres partes iguales. Entonces nuestros tres rangos son los siguientes:
  
  • [0, 0.33]
  • [0,33, 0,66]
  • [0,66, 1]
• Además, el navegador verifica el valor rojo de cada píxel en la imagen y determina en qué rango se encuentra;
• entonces todos los valores rojos de un rango se muestran con el nuevo valor asociado con este rango de los que proporcionó. La pantalla es la siguiente:
  
  • los colores en el rango [0, 0.33] se muestran como 0;
  • los colores en el rango [0.33, 0.66] se muestran como 0.5;
  • los colores en el rango [0.66, 1] se muestran como 1.

También puede pensar en este proceso como activar o desactivar los tonos de color. Cuando proporciona valores discretos para un color, le dice al navegador que solo se incluirán estos valores, y si el píxel contiene un valor que no es igual a uno de ellos, entonces debe apagarse y reemplazarse por uno de los permitidos. Entonces, por ejemplo, el valor de color de 0.8 se considera apagado y será reemplazado por 1 (porque este valor se encuentra en el tercer rango).

La siguiente es una ilustración dibujada a mano de esta pantalla a color, que pinté cuando pensé en ello. Quizás te sea útil.

Fig_4. Asignación de valores de color al rango de color.

Para cuando el navegador pase por todos los píxeles de la imagen, reemplazará una gran cantidad de valores rojos con el pequeño número que seleccionó en tableValues , reemplazando así los cambios suaves de color con transiciones nítidas, y la imagen parece estar hecha de grupos o rayas de color

La siguiente es una demostración de cómo aplicar el fragmento de código anterior a una imagen con mucho rojo. Al limitar el número de rojos en píxeles de una imagen y poner a cero los rojos en algunos de ellos, la imagen exhibe una disminución general notable en rojo, especialmente en la parte inferior de la imagen:

Cambiar el número de valores discretos y / o cambiar los valores mismos cambiará el resultado general. Es posible que no desee dar el valor de color 0 para eliminar algunas áreas negras de la imagen. Por ejemplo, en la imagen del cielo de arriba, probablemente, no debería haber grupos o franjas de color negro en la versión de la posterización de la imagen, porque todavía es una imagen del cielo. Para hacer esto, debe tener más de dos o tres colores, de lo contrario, la imagen perderá la mayor parte de su imagen.

Para crear este efecto, limité el número de colores RGB a cinco, comenzando con el valor más bajo de 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> 

Puedes jugar con el efecto en la siguiente demostración:

Conclusión

Espero que este artículo haya ayudado a aclarar un poco feComponentTransfer y le haya mostrado cuán poderosos pueden ser los controles de color de los componentes y píxeles.

En el próximo artículo, consideraremos dos tipos más potentes de la función de transferencia feComponentTransfer . Veremos cómo puede simular el efecto de una imagen de Photoshop de dos tonos y cómo puede controlar el brillo, el contraste y la intensidad del color de una imagen usando feComponentTransfer . Quédate con nosotros