Effet de saturation utilisant la matrice de couleurs SVG en C#

Avez-vous déjà remarqué à quel point certaines images sur Internet semblent trop lumineuses ou que les couleurs ne sont tout simplement pas tout à fait correctes ? Cela est dû à un phénomène appelé effet de saturation. Dans cet article, nous allons apprendre à obtenir l’effet de saturation avec une matrice de couleurs SVG en C#.

Tout d’abord, nous allons en apprendre davantage sur l’effet de saturation et jeter un œil à l’API C# SVG pour appliquer le filtre de matrice de couleurs SVG. Ensuite, nous allons parcourir les étapes de la correction de l’effet de saturation en utilisant la matrice de couleurs pour ajuster les couleurs d’une image. Enfin, nous fournirons des liens utiles pour d’autres améliorations. Alors, commençons!

Cet article couvrira les sujets suivants :

  1. Qu’est-ce que l’effet de saturation et la matrice de couleurs SVG
  2. API SVG C# pour l’effet de saturation à l’aide de la matrice de couleurs
  3. Comment utiliser la matrice de couleurs SVG pour un effet de saturation
  4. Créer un effet de saturation à l’aide de Color Matrix en C#

Qu’est-ce que l’effet de saturation et la matrice de couleurs SVG

L’effet de saturation est une technique de traitement d’image courante utilisée pour rendre une image plus éclatante. Il décrit l’intensité de la couleur.

L’effet de saturation est causé par la façon dont notre cerveau traite la couleur. Lorsque nous voyons une image, notre cerveau ajuste automatiquement les couleurs pour les rendre plus naturelles. Cependant, lorsqu’une image a trop de couleurs ou que les couleurs ne sont pas uniformément équilibrées, notre cerveau a plus de mal à traiter l’image, ce qui peut provoquer un effet de saturation.

Nous pouvons obtenir l’effet de saturation en utilisant l’élément de filtre SVG . Il fournit un filtre pour les transformations de couleur pour changer les couleurs en fonction d’une matrice de transformation.

API SVG C# pour l’effet de saturation à l’aide de la matrice de couleurs

L’effet de saturation est un cas particulier d’utilisation de la matrice de couleurs. Nous utiliserons l’API Aspose.SVG pour .NET pour utiliser l’opération de saturation de la primitive de filtre . L’API permet le chargement, l’analyse, le rendu, la création et la conversion de fichiers SVG en formats populaires sans aucune dépendance logicielle.

Veuillez soit télécharger la DLL de l’API ou l’installer à l’aide de NuGet.

PM> Install-Package Aspose.SVG

Comment utiliser la matrice de couleurs SVG pour un effet de saturation

Le applique une transformation matricielle aux canaux RGBA de chaque pixel de l’image d’entrée. Nous pouvons utiliser l’élément SVG pour l’effet de saturation en suivant les étapes ci-dessous :

  1. Définissez un document SVG et définissez l’URL de l’espace de noms SVG.
  2. Créez un élément d’image et un élément de filtre.
  3. Ajoutez l’élément graphique.
  4. Créez un élément feColorMatrix et ajoutez-le à l’élément de filtre.
  5. Enregistrez l’image SVG de sortie.

La section suivante décrit comment transformer ces étapes en code C# et créer un effet de saturation en SVG.

Créer un effet de saturation à l’aide de Color Matrix en C#

Nous pouvons créer un effet de saturation en utilisant l’élément en suivant les étapes ci-dessous :

  1. Tout d’abord, créez une instance de la classe SVGDocument.
  2. Ensuite, accédez à l’élément SVG racine et spécifiez l’URL de l’espace de noms pour SVG.
  3. Ensuite, initialisez l’objet de classe SVGImageElement.
  4. Pendant ce temps, définissez un chemin d’image et d’autres propriétés pour SVGImageElement.
  5. Ensuite, définissez l’objet de classe SVGDefsElement et ajoutez-le à l’élément racine.
  6. Ensuite, créez l’objet de classe SVGFilterElement et ajoutez-le à SVGDefsElement.
  7. Ensuite, définissez l’objet de classe SVGFEColorMatrixElement.
  8. Ensuite, définissez les attributs requis ig type : saturer
  9. Après cela, ajoutez le SVGFEColorMatrixElement au SVGFilterElement.
  10. Enfin, enregistrez le fichier SVG de sortie à l’aide de la méthode Save().

L’exemple de code suivant montre comment créer un effet de saturation avec la matrice de couleurs en C#.

// Cet exemple de code montre comment créer un effet de saturation avec la matrice de couleurs en C#.
// Créer une instance du SVGDocument
var document = new SVGDocument();

// Obtenir l'élément svg racine du document
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);

// Créez un élément defs et ajoutez-le à svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Créez un élément de filtre et ajoutez-le à defsElement
Aspose.Svg.SVGFilterElement filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
defsElement.AppendChild(filterElement);

// Créer un élément feColorMatrix
var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
feColorMatrixElement.In1.BaseVal = "SourceGraphic";
feColorMatrixElement.SetAttribute("type", "saturate");
feColorMatrixElement.SetAttribute("values", "2");
filterElement.Id = "CM";

// Ajouter à l'élément de filtre
filterElement.AppendChild(feColorMatrixElement);

// Enregistrez le document SVG
document.Save("C:\\Files\\ColorEffect.svg");
Image source phare.jpg

Image d’entrée source

Effet de saturation à l'aide de la matrice de couleurs SVG

Effet de saturation utilisant la matrice de couleurs SVG en 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>

Obtenez une licence API gratuite

Vous pouvez obtenir une licence temporaire gratuite pour essayer la bibliothèque sans limitation d’évaluation.

Conclusion

Dans cet article, vous avez découvert l’effet de saturation sur les images. Nous avons également vu comment appliquer l’effet de couleur de saturation à l’aide des filtres de matrice de couleurs SVG en C#. En outre, vous pouvez en savoir plus sur Aspose.SVG pour .NET en utilisant documentation et explorer diverses fonctionnalités offertes par l’API. En cas d’ambiguïté, n’hésitez pas à nous contacter sur notre forum d’assistance gratuit.

Voir également