Efeito de saturação usando SVG Color Matrix em C#

Você já reparou como algumas imagens na internet parecem muito brilhantes, ou as cores simplesmente não estão certas? Isso ocorre por causa de um fenômeno chamado efeito de saturação. Neste artigo, aprenderemos como obter o efeito de saturação com uma matriz de cores SVG em C#.

Em primeiro lugar, aprenderemos sobre o efeito de saturação e daremos uma olhada na API C# SVG para aplicar o filtro de matriz de cores SVG. Em seguida, percorreremos as etapas de como corrigir o efeito de saturação usando a matriz de cores para ajustar as cores em uma imagem. Por fim, forneceremos links úteis para outras melhorias. Então vamos começar!

Este artigo deve abordar os seguintes tópicos:

  1. O que é efeito de saturação e matriz de cores SVG
  2. API C# SVG para efeito de saturação usando matriz de cores
  3. Como usar a matriz de cores SVG para efeito de saturação
  4. Criar efeito de saturação usando matriz de cores em C#

O que é efeito de saturação e matriz de cores SVG

O efeito de saturação é uma técnica de processamento de imagem comum que é usada para fazer uma imagem parecer mais vibrante. Descreve a intensidade da cor.

O efeito de saturação é causado pela forma como nosso cérebro processa as cores. Quando vemos uma imagem, nosso cérebro ajusta automaticamente as cores para torná-las mais naturais. No entanto, quando uma imagem tem muita cor ou as cores não são equilibradas uniformemente, nosso cérebro tem mais dificuldade em processar a imagem, o que pode causar o efeito de saturação.

Podemos obter o efeito de saturação usando o elemento de filtro SVG . Ele fornece um filtro para transformações de cores para alterar as cores com base em uma matriz de transformação.

API C# SVG para efeito de saturação usando matriz de cores

O efeito de saturação é um caso especial de uso da matriz de cores. Usaremos a API Aspose.SVG for .NET para usar a operação de saturação da primitiva de filtro . A API permite o carregamento, análise, renderização, criação e conversão de arquivos SVG para formatos populares sem nenhuma dependência de software.

Por favor, faça o download da DLL da API ou instale-a usando NuGet.

PM> Install-Package Aspose.SVG

Como usar a matriz de cores SVG para efeito de saturação

O aplica uma transformação de matriz aos canais RGBA de cada pixel na imagem de entrada. Podemos usar o elemento SVG para efeito de saturação seguindo os passos abaixo:

  1. Defina um documento SVG e defina o URL do namespace SVG.
  2. Crie um elemento de imagem e um elemento de filtro.
  3. Anexe o elemento gráfico.
  4. Crie um elemento feColorMatrix e adicione-o ao elemento de filtro.
  5. Salve a imagem SVG de saída.

A seção a seguir descreve como transformar essas etapas em código C# e criar um efeito de saturação em SVG.

Criar efeito de saturação usando matriz de cores em C#

Podemos criar um efeito de saturação usando o elemento seguindo os passos abaixo:

  1. Primeiramente, crie uma instância da classe SVGDocument.
  2. Em seguida, acesse o elemento SVG raiz e especifique a URL do namespace para SVG.
  3. Em seguida, inicialize o objeto de classe SVGImageElement.
  4. Enquanto isso, defina um caminho de imagem e outras propriedades para o SVGImageElement.
  5. Em seguida, defina o objeto de classe SVGDefsElement e adicione-o ao elemento raiz.
  6. Em seguida, crie o objeto de classe SVGFilterElement e adicione-o ao SVGDefsElement.
  7. Em seguida, defina o objeto de classe SVGFEColorMatrixElement.
  8. Em seguida, defina os atributos necessários ig type: saturate
  9. Depois disso, adicione o SVGFEColorMatrixElement ao SVGFilterElement.
  10. Finalmente, salve o arquivo SVG de saída usando o método Save().

O exemplo de código a seguir mostra como criar um efeito de saturação com a matriz de cores em C#.

// Este exemplo de código demonstra como criar um efeito de saturação com a matriz de cores em C#.
// Crie uma instância do SVGDocument
var document = new SVGDocument();

// Obter elemento svg raiz do documento
var svgElement = document.RootElement;

const string SvgNamespace = "http://www.w3.org/2000/svg";

var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
imageElement.Href.BaseVal = @"C:\Files\lighthouse.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(#CM)");
svgElement.AppendChild(imageElement);

// Crie um elemento defs e adicione ao svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Crie um elemento de filtro e adicione ao defsElement
Aspose.Svg.SVGFilterElement filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
defsElement.AppendChild(filterElement);

// Criar um elemento feColorMatrix
var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
feColorMatrixElement.In1.BaseVal = "SourceGraphic";
feColorMatrixElement.SetAttribute("type", "saturate");
feColorMatrixElement.SetAttribute("values", "2");
filterElement.Id = "CM";

// Anexar ao elemento de filtro
filterElement.AppendChild(feColorMatrixElement);

// Salve o documento SVG
document.Save("C:\\Files\\ColorEffect.svg");
Imagem de origem lighthouse.jpg

Imagem de entrada de origem

Efeito de saturação usando matriz de cores SVG

Efeito de saturação usando SVG Color Matrix em C#

<svg xmlns="http://www.w3.org/2000/svg">
    <image href="file:///C:/Files/lighthouse.jpg" height="640" width="480" x="20" y="20" filter="url(#CM)"/>
    <defs>
        <filter id="CM">
            <feColorMatrix in="SourceGraphic" type="saturate" values="2"/>
        </filter>
    </defs>
</svg>

Obtenha uma licença de API gratuita

Você pode obter uma licença temporária gratuita para experimentar a biblioteca sem limitações de avaliação.

Conclusão

Neste artigo, você aprendeu sobre o efeito de saturação em imagens. Também vimos como aplicar o efeito de cor de saturação usando os filtros de matriz de cores SVG em C#. Além disso, você pode aprender mais sobre o Aspose.SVG para .NET usando documentação e explorar vários recursos oferecidos pela API. Em caso de qualquer ambiguidade, sinta-se à vontade para entrar em contato conosco em nosso fórum de suporte gratuito.

Veja também