Revirado de imágenes por cada canal de color con el filtro SVG feComponentTransfer 26.5.15
Cómo modificar de forma independiente cada uno de los tres canales de color (rojo, verde y azul) de una imagen de forma sencilla con el filtro SVG feComponentTransfer usado con la propiedad Css filter.
Revirado de imágenes por cada canal de color con el filtro SVG feComponentTransfer
Este artículo está dedicado a otro de los filtros SVG "clásicos" o primitive filters
que llama la especificación. En concreto al filtro SVG feComponentTransfer.
El filtro feComponentTransfer realiza una corrección del color por cada uno de los tres canales RGB. Tiene un cuarto para la opacidad o transparencia del elemento al que se aplica.
En su funcionamiento y uso es de los sencillos, pues sólo se necesita modificar un único valor en cada uno de los tres canales de color (rojo, verde, azul) para aumentar o disminuir cada uno de ellos.
El filtro SVG feComponentTransfer
La sintaxis de este filtro es de las "simples". Como puedes ver en el siguiente código:
<svg class='hide'>
<defs>
<filter id="filterCanal">
<feComponentTransfer>
<feFuncR type="gamma" exponent="1" />
<feFuncG type="gamma" exponent="1" />
<feFuncB type="gamma" exponent="1" />
<feFuncA type="gamma" exponent="1" />
</feComponentTransfer>
</filter>
</defs>
</svg>
filter id="filterCanal" El valor de el id será utilizado para ser empleado vía la propiedad Css filter: url(#id) en aquellos elementos deseados.
elemento {
filter: url(#filterCanal);
}
La parte principal y la que controla el efecto del filtro es el valor del atributo exponent='' de cada uno de los elementos <feFunc- Sustituye el - por las letras R,G,B,A indicadores de cada canal de color más el Alfa.
Valores superiores a 1 quita tinta de ese color. Valores inferiores a 1 incrementan el tono del canal.
Esta modificación de los canales de color se produce incluso en imágenes en escala de grises.
En esta ocasión, para que veas el efecto del filtro SVG feComponentTransfer y de cada canal de color sólo tienes que arrastrar cada uno de los input type="range"
de la siguiente demo.
See the Pen LVbjRG by Kseso (@Kseso) on CodePen.
Como ocurre siempre con estos filtros que modifican la tonalidad, el resultado final depende mucho de la imagen original y sus características cromáticas.
Para esta demo verás que además de elegir una imagen pobre en colores le añado un filtro de contraste contrast(2) que la oscurece aún más para que sea más notorio el efecto del filtro SVG feComponentTransfer.
Como bien saben los usuarios de este blog lo mio no es el javascript. Así que mejor no toméis nota ni me saquéis los colores por el js empleado para mostrar y pasar los valores de cada input a cada atributo exponent.
Con vuestra comprensión de mi ignorancia mis disculpas.
 de una imagen de forma sencilla con el filtro SVG <code>feComponentTransfer</code> usado con la propiedad Css filter.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso