Pernahkah Anda memperhatikan bagaimana beberapa gambar di internet terlihat terlalu terang, atau warnanya kurang tepat? Ini karena fenomena yang disebut efek saturasi. Pada artikel ini, kita akan mempelajari cara mendapatkan efek saturasi dengan matriks warna SVG di C#.
Pertama, kita akan belajar tentang efek saturasi dan melihat API C# SVG untuk menerapkan filter matriks warna SVG. Selanjutnya, kita akan membahas langkah-langkah cara memperbaiki efek saturasi dengan menggunakan matriks warna untuk menyesuaikan warna pada gambar. Terakhir, kami akan memberikan tautan yang berguna untuk penyempurnaan lebih lanjut. Jadi mari kita mulai!
Artikel ini akan mencakup topik-topik berikut:
- Apa itu Efek Saturasi dan Matriks Warna SVG
- C# SVG API untuk Efek Saturasi menggunakan Matriks Warna
- Cara Menggunakan Matriks Warna SVG untuk Efek Saturasi
- Buat Efek Saturasi menggunakan Color Matrix di C#
Apa itu Efek Saturasi dan Matriks Warna SVG
Efek saturasi adalah teknik pemrosesan gambar umum yang digunakan untuk membuat gambar tampak lebih hidup. Ini menggambarkan intensitas warna.
Efek saturasi disebabkan oleh cara otak kita memproses warna. Saat kita melihat sebuah gambar, otak kita secara otomatis menyesuaikan warna agar terlihat lebih natural. Namun, ketika sebuah gambar memiliki terlalu banyak warna, atau warnanya tidak seimbang secara merata, otak kita akan lebih sulit memproses gambar tersebut, yang dapat menyebabkan efek saturasi.
Kita dapat mencapai efek saturasi menggunakan elemen filter SVG . Ini menyediakan filter untuk transformasi warna untuk mengubah warna berdasarkan matriks transformasi.
C# SVG API untuk Saturation Effect menggunakan Color Matrix
Efek saturasi adalah kasus khusus menggunakan matriks warna. Kita akan menggunakan API Aspose.SVG for .NET untuk menggunakan operasi saturasi primitif filter . API memungkinkan pemuatan, parsing, rendering, pembuatan, dan konversi file SVG ke format populer tanpa ketergantungan perangkat lunak apa pun.
Harap unduh DLL API atau instal menggunakan NuGet.
PM> Install-Package Aspose.SVG
Cara Menggunakan Matriks Warna SVG untuk Efek Saturasi
menerapkan transformasi matriks ke saluran RGBA dari setiap piksel pada gambar masukan. Kita dapat menggunakan elemen SVG untuk efek saturasi dengan mengikuti langkah-langkah berikut:
- Tentukan dokumen SVG dan atur URL namespace SVG.
- Buat elemen gambar dan elemen filter.
- Tambahkan elemen grafis.
- Buat elemen feColorMatrix dan tambahkan ke elemen filter.
- Simpan gambar SVG keluaran.
Bagian berikut menjelaskan cara mengubah langkah-langkah ini menjadi kode C# dan membuat efek saturasi di SVG.
Buat Efek Saturasi menggunakan Color Matrix di C#
Kita dapat membuat efek saturasi menggunakan elemen dengan mengikuti langkah-langkah di bawah ini:
- Pertama, buat instance dari kelas SVGDocument.
- Selanjutnya, akses elemen root SVG dan tentukan URL namespace untuk SVG.
- Kemudian, inisialisasi objek kelas SVGImageElement.
- Sementara itu, atur jalur gambar dan properti lainnya untuk SVGImageElement.
- Selanjutnya, tentukan objek kelas SVGDefsElement dan tambahkan ke elemen root.
- Kemudian, buat objek kelas SVGFilterElement dan tambahkan ke SVGDefsElement.
- Selanjutnya, tentukan objek kelas SVGFEColorMatrixElement.
- Kemudian, atur atribut yang diperlukan ig type: saturate
- Setelah itu, tambahkan SVGFEColorMatrixElement ke SVGFilterElement.
- Terakhir, simpan file keluaran SVG menggunakan metode Save().
Contoh kode berikut menunjukkan cara membuat efek saturasi dengan matriks warna di C#.
// Contoh kode ini menunjukkan cara membuat efek saturasi dengan matriks warna di C#.
// Buat instance dari SVGDocument
var document = new SVGDocument();
// Dapatkan elemen root svg dari dokumen
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);
// Buat elemen defs dan tambahkan ke svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);
// Buat elemen filter dan tambahkan ke defsElement
Aspose.Svg.SVGFilterElement filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
defsElement.AppendChild(filterElement);
// Buat elemen feColorMatrix
var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
feColorMatrixElement.In1.BaseVal = "SourceGraphic";
feColorMatrixElement.SetAttribute("type", "saturate");
feColorMatrixElement.SetAttribute("values", "2");
filterElement.Id = "CM";
// Tambahkan ke Elemen Filter
filterElement.AppendChild(feColorMatrixElement);
// Simpan dokumen SVG
document.Save("C:\\Files\\ColorEffect.svg");
Gambar masukan sumber
Efek Saturasi menggunakan Matriks Warna SVG di 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>
Dapatkan Lisensi API Gratis
Anda bisa mendapatkan lisensi sementara gratis untuk mencoba perpustakaan tanpa batasan evaluasi.
Kesimpulan
Pada artikel ini, Anda telah mempelajari tentang efek saturasi pada gambar. Kita juga telah melihat cara menerapkan efek warna saturasi menggunakan filter matriks warna SVG di C#. Selain itu, Anda dapat mempelajari lebih lanjut tentang Aspose.SVG for .NET menggunakan dokumentasi dan menjelajahi berbagai fitur yang ditawarkan oleh API. Jika ada ambiguitas, jangan ragu untuk menghubungi kami di forum dukungan gratis.