Filtros de color – Código C#

En este artículo, aprenderá sobre los principales filtros de color: <feColorMatrix> y <feComponentTransfer>. Aquí encontrará ejemplos que muestran cómo escribir código SVG para crear efectos de saturación, hueRotate y luminanceToAlpha, así como ejemplos detallados de C# sobre el uso del espacio de nombres Aspose.Svg.Filters para aplicar filtros de color a elementos SVG o mapas de bits.

Filtros de color

Aspose.SVG for .NET le permite crear varios efectos de filtro SVG que son compatibles con casi todos los navegadores modernos. Cuando se trata de manejo del color, <feColorMatrix> es la mejor opción. Es un tipo de filtro de color que utiliza una matriz para afectar los valores de color de cada canal RGBA. <feComponentTransfer> es una de las primitivas de filtro SVG más potentes. Da control sobre los canales RGBA individuales de la imagen, lo que le permite crear efectos SVG similares a Photoshop; por ejemplo, se puede utilizar para posterizar imágenes.

Matriz de colores – primitiva de filtro <feColorMatrix>

<feColorMatrix> es uno de los principales filtros de color. Esta primitiva de filtro aplica una transformación matricial a los canales RGBA de cada píxel en la imagen de entrada. Como resultado, se produce un nuevo conjunto de valores de color y alfa. En el caso común, la matriz de color se escribe como una operación del atributo type del elemento <feColorMatrix>. En los casos especiales de matrices de color, se utilizan las operaciones auxiliares del type: saturate, hueRotate, luminanceToAlpha.

Efecto de saturación

El efecto de saturación es un caso especial del uso de la matriz de color. Veamos ejemplos de la operación saturate utilizada en el atributo type de la primitiva de filtro <feColorMatrix>:

<svg xmlns="http://www.w3.org/2000/svg">
    <image filter="url(#saturation-effect)" href="http://docs.aspose.com/svg/net/images/api/lighthouse.jpg" x="20" y="20" height="440" width="330" />
    <defs>
        <filter id="saturation-effect">
            <feColorMatrix in="SourceGraphic" type="saturate" values="2"></feColorMatrix>
        </filter>
    </defs>
</svg>

El código SVG anterior ilustra la creación del efecto de saturación y le recuerda que en SVG, un filtro se define mediante un elemento <filter> que se establece dentro de un elemento <defs>. Nunca se representa y se describe conceptualmente como un elemento que incluye sus elementos secundarios, las primitivas de filtro.

El siguiente código C# crea un archivo SVG con una imagen con mayor saturación, lo que hace que los colores parezcan más vibrantes. El efecto de saturación se logra mediante la primitiva de filtro <feColorMatrix> con los valores especificados en el código.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;
using Aspose.Svg.DataTypes;

// Apply saturation filter to an <image> element in SVG programmatically

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add it to the <svg> element
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/lighthouse.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 440;
    imageElement.Width.BaseVal.Value = 330;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#saturation)");
    svgElement.AppendChild(imageElement);

    // Create a <defs> element and add it to the <svg> element
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the <defs> element	
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "saturation";
    defsElement.AppendChild(filterElement);

    // Create a <feColorMatrix> element and add it to the <filter> element
    SVGFEColorMatrixElement feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
    feColorMatrixElement.SetAttribute("type", "saturate");
    feColorMatrixElement.SetAttribute("values", "2");
    filterElement.AppendChild(feColorMatrixElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "saturation-effect.svg"));
}

Consideremos el código paso a paso:

1. Cree una instancia de la clase SVGDocument.
2. La propiedad RootElement de la clase SVGDocument apunta al elemento raíz <svg> del documento.
3. Cree un elemento <image> con atributos y agréguelo al elemento <svg>:
   • Puede utilizar el método CreateElementNS(namespaceURI, qualifiedName) para crear una instancia de la clase SVGImageElement.
   • Establecer atributos especificando su origen, posición y tamaño. El uso de un atributo filter de imageElement que se refiere al nombre de la URL de un atributo id en filterElement permite aplicar el efecto de filtro SVG a la imagen.
   • Para agregar un imageElement a svgElement, puedes usar el método AppendChild().
4. Cree un elemento <defs> y agréguelo al elemento <svg>:
   • Utilice el método CreateElementNS() para crear una instancia de la clase SVGDefsElement.
   • Utilice el método AppendChild() para agregar el elemento <defs> al elemento <svg>.
5. Cree un elemento <filter>, establezca un atributo id y agregue <filter> al elemento <defs>:
   • Utilice el método CreateElementNS() para crear una instancia de la clase SVGFilterElement.
   • Establezca un filterElement.Id para el elemento <filter>, se puede aplicar a la imagen.
   • Utilice el método AppendChild() para agregar el <filter> al elemento <defs>.
6. Cree un elemento <feColorMatrix>, establezca atributos y agréguelo al elemento <filter>:
   • Utilice el método CreateElementNS() para crear una instancia de la clase SVGFEColorMatrix.
   • Llame al método SetAttribute(name, value) para establecer los atributos type y values.
   • No olvides configurar el atributo in1. Utilice la propiedad del tipo SVGAnimatedLength, cuyos datos estáticos se pueden configurar o leer mediante la construcción feColorMatrixElement.In1.BaseVal = "SourceGraphic".
   • Utilice el método AppendChild() para agregar <feColorMatrix> al elemento <filter>.
7. Llame al método Save() para guardar el documento SVG con la imagen saturada en un archivo local especificado por ruta.

HueRotate

El caso específico de las matrices de color es la rotación de la imagen a lo largo de la rueda cromática. La operación type="hueRotate" se utiliza para cambiar el tono de color de una imagen o elemento. Con “hueRotate”, puede crear efectos de colores intensos y vívidos y personalizar la apariencia de los elementos de su sitio web. El hueRotate toma values: el ángulo de rotación en grados. Este ángulo indica el ángulo para girar la rueda de color. El valor puede estar entre 0 y 360, donde 0 y 360 representan el tono de color original y 180 representa una rotación de 180 grados (los colores se invierten).

El siguiente ejemplo de SVG ilustra el uso de la operación type="hueRotate" en la primitiva de filtro <feColorMatrix>:

<defs>
    <filter id="hueRotate">
        <feColorMatrix in="SourceGraphic" type="hueRotate" values="150"></feColorMatrix>
    </filter>
</defs>

El siguiente código C# crea una primitiva de filtro <feColorMatrix> y la agrega a un elemento SVG <filter> existente para aplicar un efecto hueRotate usando Aspose.SVG for .NET API. El efecto de rotación de tono cambia el tono del gráfico de entrada, cambiando efectivamente sus colores alrededor de la rueda de colores.

    // Creating a <feColorMatrix> element and add to the <filter> element
    var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
    feColorMatrixElement.SetAttribute("type", "hueRotate");
    feColorMatrixElement.SetAttribute("values", "150");
    filterElement.AppendChild(feColorMatrixElement);

Esta figura es una serie de imágenes con varios valores de atributo type. La figura muestra la imagen de origen (a), las imágenes procesadas por el filtro feColorMatrix, después de aplicar el efecto de saturación (b), hueRotate (c) y luminanceToAlpha (d).

Canales de color: primitiva de filtro <feComponentTransfer>

La primitiva de filtro <feComponentTransfer> es un poderoso elemento SVG que le permite realizar operaciones lineales, tabulares y discretas con canales de imagen y cambiar la gamma de cada canal (RGBA). Esto permite varios ajustes y efectos de color, como cambios de contraste, corrección gamma, inversión de color, ajuste de brillo y más. Por lo general, los subelementos <feFuncR>, <feFuncG>, <feFuncB> y <feFuncA> se utilizan con <feComponentTransfer>. Definen las funciones de transformación para los canales rojo, verde, azul y alfa, respectivamente, y pueden contener atributos como type, tableValues, slope, intercept, amplitude, exponent y offset que definen el comportamiento de la transformación. En el atributo type se determina el tipo de función que permite modificar este componente. Hay cinco tipos de funciones: identity, table, discrete, linear y gamma. Cuando type="linear", el atributo slope indica la pendiente de la función lineal. Si no se especifica el atributo, entonces el efecto es como si se especificara un valor de 1. Veamos un ejemplo de SVG:

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="330" width="440" x="10" y="10" filter="url(#rgba)" />
    <defs>
		<filter id="rgba">
			<feComponentTransfer>
				<feFuncR type="linear" slope="1.1"/>
				<feFuncG type="linear" slope="1.5"/>
				<feFuncB type="linear" slope="2.0"/>
				<feFuncA type="identity"/>
			</feComponentTransfer>
		</filter>
	</defs>
</svg>

Aquí escribiremos código C# para crear el mismo efecto de transformación lineal del canal de imagen que en el código SVG anterior.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Apply RGBA component transfer filter to an <image> element in SVG programmatically

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add it to the svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 640;
    imageElement.Width.BaseVal.Value = 480;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#rgba)");
    svgElement.AppendChild(imageElement);

    // Create a <defs> element and add it to the <svg> element
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the <defs> element
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "rgba";
    defsElement.AppendChild(filterElement);

    // Create a <feComponentTransfer> element and add it to the <filter> element
    SVGFEComponentTransferElement feComponentTransferElement = (SVGFEComponentTransferElement)document.CreateElementNS(SvgNamespace, "feComponentTransfer");
    filterElement.AppendChild(feComponentTransferElement);

    // Create a <feFuncR> element and add it to the <feComponentTransfer> element
    SVGFEFuncRElement feFuncRElement = (SVGFEFuncRElement)document.CreateElementNS(SvgNamespace, "feFuncR");
    feFuncRElement.SetAttribute("type", "linear");
    feFuncRElement.SetAttribute("slope", "1.1");
    feComponentTransferElement.AppendChild(feFuncRElement);

    // Creating a <feFuncG> element and add it to the <feComponentTransfer> element
    SVGFEFuncGElement feFuncGElement = (SVGFEFuncGElement)document.CreateElementNS(SvgNamespace, "feFuncG");
    feFuncGElement.SetAttribute("type", "linear");
    feFuncGElement.SetAttribute("slope", "1.5");
    feComponentTransferElement.AppendChild(feFuncGElement);

    // Create a <feFuncB> element and add it to the <feComponentTransfer> element
    SVGFEFuncBElement feFuncBElement = (SVGFEFuncBElement)document.CreateElementNS(SvgNamespace, "feFuncB");
    feFuncBElement.SetAttribute("type", "linear");
    feFuncBElement.SetAttribute("slope", "2.0");
    feComponentTransferElement.AppendChild(feFuncBElement);

   // Create a <feFuncA> element and add it to the <feComponentTransfer> element
   SVGFEFuncAElement feFuncAElement = (SVGFEFuncAElement)document.CreateElementNS(SvgNamespace, "feFuncA");
   feFuncAElement.SetAttribute("type", "identity");
   feComponentTransferElement.AppendChild(feFuncAElement);
  
    // Save the document
    document.Save(Path.Combine(OutputDir, "rgba.svg"));
}

La figura muestra la imagen de origen (a) y las imágenes procesadas por el filtro feComponentTransfer (b, c).

Ver también

• Puede descargar los ejemplos completos y los archivos de datos desde GitHub.

• Encontrará información sobre la descarga desde GitHub y la ejecución de ejemplos en la sección Cómo ejecutar los ejemplos.

• Para obtener más información sobre las primitivas de filtro, consulte la página Módulo de efectos de filtro W3C y el artículo Filtros y degradados SVG.

• Aspose.SVG ofrece Aplicaciones web SVG gratuitas para convertir archivos SVG o de imagen, fusionar SVG, vectorizar imágenes, generar sprites SVG, codificar datos SVG a Base64 y más. Estas aplicaciones en línea funcionan en cualquier sistema operativo con un navegador web y no requieren instalación de software adicional. ¡Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con SVG!