在 C# 中使用 SVG 顏色矩陣的飽和度效果

你有沒有註意到互聯網上的一些圖片看起來太亮了,或者顏色不太對?這是因為一種稱為飽和效應的現象。在本文中,我們將學習如何在 C# 中使用 SVG 顏色矩陣實現飽和效果。

首先,我們將了解飽和度效果並查看 C# SVG API 以應用 SVG 顏色矩陣濾鏡。接下來,我們將逐步介紹如何通過使用顏色矩陣調整圖像中的顏色來修復飽和度效果。最後,我們將提供有用的鏈接以進一步增強功能。讓我們開始吧!

本文應涵蓋以下主題:

  1. 什麼是飽和度效果和SVG顏色矩陣
  2. 使用顏色矩陣實現飽和效果的 C# SVG API
  3. 如何使用 SVG 顏色矩陣實現飽和效果
  4. 在C#中使用顏色矩陣創建飽和度效果

什麼是飽和度效果和 SVG 顏色矩陣

飽和度效果是一種常見的圖像處理技術,用於使圖像看起來更加生動。它描述了顏色的強度。

飽和度效應是由我們的大腦處理顏色的方式引起的。當我們看到一幅圖像時,我們的大腦會自動調整顏色,使它們看起來更自然。但是,當圖像顏色過多或顏色不均勻時,我們的大腦會更難處理圖像,從而導致飽和效果。

我們可以使用 SVG 濾鏡元素來實現飽和效果。它為顏色變換提供了一個過濾器,可以根據變換矩陣改變顏色。

使用顏色矩陣實現飽和效果的 C# SVG API

飽和效果是使用顏色矩陣的一個特例。我們將使用 Aspose.SVG for .NET API 來使用 濾鏡基元的飽和操作。該 API 允許加載、解析、渲染、創建 SVG 文件並將其轉換為 流行格式,而無需任何軟件依賴性。

下載 API 的 DLL 或使用 NuGet 安裝它。

PM> Install-Package Aspose.SVG

如何使用 SVG 顏色矩陣實現飽和效果

將矩陣變換應用於輸入圖像中每個像素的 RGBA 通道。我們可以按照以下步驟使用 SVG 元素來實現飽和效果:

  1. 定義 SVG 文檔並設置 SVG 命名空間 URL。
  2. 創建圖像元素和過濾器元素。
  3. 附加圖形元素。
  4. 創建一個 feColorMatrix 元素並將其添加到過濾器元素。
  5. 保存輸出的 SVG 圖像。

以下部分介紹如何將這些步驟轉換為 C# 代碼並在 SVG 中創建飽和效果。

在 C# 中使用顏色矩陣創建飽和度效果

我們可以按照以下步驟使用 元素創建飽和效果:

  1. 首先,創建 SVGDocument 類的一個實例。
  2. 接下來,訪問根 SVG 元素並指定 SVG 的命名空間 URL。
  3. 然後,初始化 SVGImageElement 類對象。
  4. 同時,為SVGImageElement設置圖片路徑等屬性。
  5. 接下來,定義 SVGDefsElement 類對象並將其添加到根元素。
  6. 然後,創建 SVGFilterElement 類對象並將其添加到 SVGDefsElement。
  7. 接下來,定義 SVGFEColorMatrixElement 類對象。
  8. 然後,設置所需的屬性 ig type: saturate
  9. 之後,將 SVGFEColorMatrixElement 添加到 SVGFilterElement。
  10. 最後,使用 Save() 方法保存輸出的 SVG 文件。

下面的代碼示例展示瞭如何在 C# 中使用顏色矩陣創建飽和度效果。

// 此代碼示例演示如何使用 C# 中的顏色矩陣創建飽和度效果。
// 創建 SVGDocument 的實例
var document = new SVGDocument();

// 獲取文檔的根 svg 元素
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);

// 創建一個 defs 元素並添加到 svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// 創建一個過濾器元素並添加到 defsElement
Aspose.Svg.SVGFilterElement filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
defsElement.AppendChild(filterElement);

// 創建一個 feColorMatrix 元素
var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
feColorMatrixElement.In1.BaseVal = "SourceGraphic";
feColorMatrixElement.SetAttribute("type", "saturate");
feColorMatrixElement.SetAttribute("values", "2");
filterElement.Id = "CM";

// 附加到過濾器元素
filterElement.AppendChild(feColorMatrixElement);

// 保存 SVG 文檔
document.Save("C:\\Files\\ColorEffect.svg");
源圖片 lighthouse.jpg

源輸入圖像

使用 SVG 顏色矩陣的飽和度效果

在 C# 中使用 SVG 顏色矩陣的飽和度效果

<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>

獲取免費的 API 許可證

您可以 獲得免費的臨時許可證 來試用該庫,而沒有評估限制。

結論

在本文中,您了解了圖像的飽和度效果。我們還看到瞭如何在 C# 中使用 SVG 顏色矩陣濾鏡來應用飽和度顏色效果。此外,您可以使用 文檔 了解有關 Aspose.SVG for .NET 的更多信息,並探索 API 提供的各種功能。如有任何疑問,請隨時通過我們的免費支持論壇與我們聯繫。

也可以看看