Effetto di saturazione utilizzando SVG Color Matrix in C#

Hai mai notato come alcune immagini su Internet sembrano troppo luminose o i colori non sono del tutto giusti? Ciò è dovuto a un fenomeno chiamato effetto di saturazione. In questo articolo impareremo come ottenere l’effetto di saturazione con una matrice di colori SVG in C#.

In primo luogo, impareremo a conoscere l’effetto di saturazione e daremo un’occhiata all’API C# SVG per applicare il filtro a matrice di colori SVG. Successivamente, illustreremo i passaggi su come correggere l’effetto di saturazione utilizzando la matrice dei colori per regolare i colori in un’immagine. Infine, forniremo link utili per ulteriori miglioramenti. Quindi iniziamo!

Questo articolo tratterà i seguenti argomenti:

  1. Cos’è l’effetto saturazione e la matrice colore SVG
  2. API SVG C# per l’effetto di saturazione utilizzando Color Matrix
  3. Come utilizzare la matrice colore SVG per l’effetto di saturazione
  4. Crea effetto saturazione usando Color Matrix in C#

Che cos’è l’effetto saturazione e la matrice colore SVG

L’effetto di saturazione è una tecnica comune di elaborazione delle immagini che viene utilizzata per far apparire un’immagine più vibrante. Descrive l’intensità del colore.

L’effetto di saturazione è causato dal modo in cui il nostro cervello elabora il colore. Quando vediamo un’immagine, il nostro cervello regola automaticamente i colori per farli sembrare più naturali. Tuttavia, quando un’immagine ha troppi colori oi colori non sono equamente bilanciati, il nostro cervello ha difficoltà a elaborare l’immagine, il che può causare l’effetto di saturazione.

Possiamo ottenere l’effetto di saturazione usando l’elemento filtro SVG . Fornisce un filtro per le trasformazioni di colore per cambiare i colori in base a una matrice di trasformazione.

API C# SVG per l’effetto di saturazione utilizzando Color Matrix

L’effetto di saturazione è un caso speciale di utilizzo della matrice colore. Utilizzeremo l’API Aspose.SVG for .NET per utilizzare l’operazione di saturazione della primitiva del filtro . L’API consente il caricamento, l’analisi, il rendering, la creazione e la conversione di file SVG in formati popolari senza alcuna dipendenza dal software.

Si prega di scaricare la DLL dell’API o installarla utilizzando NuGet.

PM> Install-Package Aspose.SVG

Come utilizzare la matrice di colori SVG per l’effetto di saturazione

applica una trasformazione di matrice ai canali RGBA di ciascun pixel nell’immagine di input. Possiamo usare l’elemento SVG per l’effetto di saturazione seguendo i passaggi indicati di seguito:

  1. Definisci un documento SVG e imposta l’URL dello spazio dei nomi SVG.
  2. Crea un elemento immagine e un elemento filtro.
  3. Aggiungi l’elemento grafico.
  4. Crea un elemento feColorMatrix e aggiungilo all’elemento filtro.
  5. Salva l’immagine SVG di output.

La sezione seguente descrive come trasformare questi passaggi in codice C# e creare un effetto di saturazione in SVG.

Crea un effetto di saturazione usando Color Matrix in C#

Possiamo creare un effetto di saturazione usando l’elemento seguendo i passaggi indicati di seguito:

  1. Innanzitutto, crea un’istanza della classe SVGDocument.
  2. Quindi, accedi all’elemento SVG radice e specifica l’URL dello spazio dei nomi per SVG.
  3. Quindi, inizializza l’oggetto classe SVGImageElement.
  4. Nel frattempo, imposta un percorso dell’immagine e altre proprietà per SVGImageElement.
  5. Quindi, definisci l’oggetto classe SVGDefsElement e aggiungilo all’elemento radice.
  6. Quindi, crea l’oggetto classe SVGFilterElement e aggiungilo a SVGDefsElement.
  7. Quindi, definisci l’oggetto classe SVGFEColorMatrixElement.
  8. Quindi, imposta gli attributi richiesti ig type: saturate
  9. Successivamente, aggiungi SVGFEColorMatrixElement a SVGFilterElement.
  10. Infine, salva il file SVG di output usando il metodo Save().

Nell’esempio di codice seguente viene illustrato come creare un effetto di saturazione con la matrice di colori in C#.

// Questo esempio di codice mostra come creare un effetto di saturazione con la matrice di colori in C#.
// Crea un'istanza di SVGDocument
var document = new SVGDocument();

// Ottieni l'elemento svg radice del 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);

// Crea un elemento defs e aggiungilo a svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Crea un elemento filtro e aggiungilo a defsElement
Aspose.Svg.SVGFilterElement filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
defsElement.AppendChild(filterElement);

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

// Aggiungi a elemento filtro
filterElement.AppendChild(feColorMatrixElement);

// Salva il documento SVG
document.Save("C:\\Files\\ColorEffect.svg");
Immagine sorgente lighthouse.jpg

Immagine di input di origine

Effetto di saturazione utilizzando SVG Color Matrix

Effetto di saturazione utilizzando SVG Color Matrix in 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>

Ottieni una licenza API gratuita

Puoi ottenere una licenza temporanea gratuita per provare la libreria senza limitazioni di valutazione.

Conclusione

In questo articolo, hai imparato a conoscere l’effetto di saturazione sulle immagini. Abbiamo anche visto come applicare l’effetto di saturazione del colore utilizzando i filtri della matrice di colori SVG in C#. Inoltre, puoi saperne di più su Aspose.SVG per .NET utilizzando la documentazione ed esplorare le varie funzionalità offerte dall’API. In caso di ambiguità, non esitare a contattarci sul nostro forum di supporto gratuito.

Guarda anche