Efekt sytosti pomocí SVG Color Matrix v C#

Všimli jste si někdy, že některé obrázky na internetu vypadají příliš jasně nebo barvy prostě nejsou úplně správné? Je to kvůli jevu zvanému saturační efekt. V tomto článku se naučíme, jak dosáhnout efektu saturace pomocí barevné matice SVG v C#.

Nejprve se seznámíme s efektem saturace a podíváme se na C# SVG API pro použití filtru barevné matice SVG. Dále si projdeme kroky, jak opravit efekt sytosti pomocí barevné matice k úpravě barev v obrázku. Nakonec poskytneme užitečné odkazy pro další vylepšení. Pojďme tedy začít!

Tento článek se bude týkat následujících témat:

  1. Co je efekt sytosti a matice barev SVG
  2. C# SVG API pro efekt sytosti pomocí barevné matice
  3. Jak používat matici barev SVG pro efekt sytosti
  4. Vytvořit efekt sytosti pomocí barevné matice v C#

Co je efekt sytosti a matice barev SVG

Efekt sytosti je běžná technika zpracování obrazu, která se používá k tomu, aby obraz vypadal živější. Popisuje intenzitu barvy.

Efekt sytosti je způsoben tím, jak náš mozek zpracovává barvu. Když vidíme obrázek, náš mozek automaticky upraví barvy, aby vypadaly přirozeněji. Pokud má však obrázek příliš mnoho barev nebo barvy nejsou rovnoměrně vyvážené, náš mozek obtížněji zpracovává obrázek, což může způsobit efekt sytosti.

Efektu sytosti dosáhneme pomocí prvku filtru SVG. Poskytuje filtr pro barevné transformace pro změnu barev na základě transformační matice.

C# SVG API pro efekt sytosti pomocí Color Matrix

Efekt sytosti je speciálním případem použití barevné matice. K použití operace saturace primitiva filtru budeme používat API Aspose.SVG for .NET. Rozhraní API umožňuje načítání, analýzu, vykreslování, vytváření a konverzi souborů SVG do oblíbených formátů bez jakékoli softwarové závislosti.

Prosím buď stáhněte si DLL rozhraní API, nebo jej nainstalujte pomocí NuGet.

PM> Install-Package Aspose.SVG

Jak používat barevnou matici SVG pro efekt sytosti

aplikuje maticovou transformaci na RGBA kanály každého pixelu ve vstupním obrazu. Pro efekt saturace můžeme použít prvek SVG podle následujících kroků:

  1. Definujte dokument SVG a nastavte adresu URL oboru názvů SVG.
  2. Vytvořte prvek obrázku a prvek filtru.
  3. Připojte grafický prvek.
  4. Vytvořte prvek feColorMatrix a přidejte jej k prvku filtru.
  5. Uložte výstupní obrázek SVG.

Následující část popisuje, jak převést tyto kroky do kódu C# a vytvořit efekt saturace v SVG.

Vytvořte efekt sytosti pomocí Color Matrix v C#

Efekt saturace můžeme vytvořit pomocí prvku podle následujících kroků:

  1. Nejprve vytvořte instanci třídy SVGDocument.
  2. Dále přejděte ke kořenovému prvku SVG a zadejte adresu URL oboru názvů pro SVG.
  3. Poté inicializujte objekt třídy SVGImageElement.
  4. Mezitím nastavte cestu obrazu a další vlastnosti pro SVGImageElement.
  5. Dále definujte objekt třídy SVGDefsElement a přidejte jej do kořenového prvku.
  6. Poté vytvořte objekt třídy SVGFilterElement a přidejte jej do SVGDefsElement.
  7. Dále definujte objekt třídy SVGFEColorMatrixElement.
  8. Poté nastavte požadované atributy ig type: saturate
  9. Poté přidejte prvek SVGFEColorMatrixElement do prvku SVGFilterElement.
  10. Nakonec uložte výstupní soubor SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak vytvořit efekt sytosti s barevnou maticí v C#.

// Tento příklad kódu ukazuje, jak vytvořit efekt sytosti pomocí barevné matice v C#.
// Vytvořte instanci SVGDocument
var document = new SVGDocument();

// Získejte kořenový prvek svg dokumentu
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);

// Vytvořte prvek defs a přidejte jej do svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Vytvořte prvek filtru a přidejte jej do prvku defsElement
Aspose.Svg.SVGFilterElement filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
defsElement.AppendChild(filterElement);

// Vytvořte prvek feColorMatrix
var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
feColorMatrixElement.In1.BaseVal = "SourceGraphic";
feColorMatrixElement.SetAttribute("type", "saturate");
feColorMatrixElement.SetAttribute("values", "2");
filterElement.Id = "CM";

// Připojit k prvku filtru
filterElement.AppendChild(feColorMatrixElement);

// Uložte dokument SVG
document.Save("C:\\Files\\ColorEffect.svg");
Zdrojový obrázek lighthouse.jpg

Zdrojový vstupní obrázek

Efekt sytosti pomocí SVG Color Matrix

Efekt sytosti pomocí SVG Color Matrix v 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>

Získejte bezplatnou licenci API

Můžete získat bezplatnou dočasnou licenci a vyzkoušet knihovnu bez omezení hodnocení.

Závěr

V tomto článku jste se dozvěděli o efektu sytosti na snímcích. Také jsme viděli, jak aplikovat efekt sytosti barev pomocí filtrů SVG color matrix v C#. Kromě toho se můžete dozvědět více o Aspose.SVG pro .NET pomocí dokumentace a prozkoumat různé funkce nabízené rozhraním API. V případě jakýchkoliv nejasností nás neváhejte kontaktovat na našem bezplatném fóru podpory.

Viz také