System.Drawing di Aplikasi Blazor WebAssemblply C#

Framework Blazor banyak digunakan untuk membangun UI web yang interaktif dan dapat digunakan kembali dalam teknologi web. Selain itu, aplikasi Blazor WebAssembly dijalankan langsung di browser pada runtime .NET berbasis WebAssembly. Artikel ini membahas cara menggunakan pustaka System.Drawing di aplikasi Blazor WebAssembly. API dapat digunakan untuk menggambar string teks, gambar, grafik vektor, dll. Mari kita baca artikel ini di bawah judul berikut untuk mempelajari lebih detail:

Buat Proyek Aplikasi C# Blazor WebAssembly

Di Microsoft Visual Studio IDE, buat aplikasi Blazor WebAssembly. Tekan tombol ‘Berikutnya’ dan kemudian tandai kotak centang .NET 5.0 dan ASP.NET Core sesuai tangkapan layar berikut.

Aplikasi Blazor WebAssembly
System.Drawing Blazor

Perbarui Referensi Proyek

Telusuri galeri NuGet dan konfigurasikan paket Aspose.Drawing untuk ditambahkan sebagai dependensi proyek.

Tambahkan Kode untuk Menggambar Gambar

Ganti konten file Pages/Index.razor dengan cuplikan kode berikut untuk membuat gambar yang berisi gambar tersebut.

@page "/"
@using System.Drawing;
@using System.Drawing.Drawing2D;
@using System.Drawing.Imaging;
@using System.IO;

<img src="@imageSrc" />

@code {
    private string imageSrc;

    public Index()
    {
        imageSrc = "data:image/png;base64, " + Convert.ToBase64String(Draw(ImageFormat.Png).ToArray());
    }

    static MemoryStream Draw(ImageFormat format)
    {
        Bitmap bitmap = new Bitmap(1000, 800, PixelFormat.Format32bppPArgb);
        Graphics graphics = Graphics.FromImage(bitmap);
        graphics.SmoothingMode = SmoothingMode.AntiAlias;

        Brush brush = new LinearGradientBrush(new Point(0, 0), new Point(1000, 800), Color.Red, Color.Blue);
        graphics.FillEllipse(brush, 100, 100, 800, 600);

        MemoryStream result = new MemoryStream();
        bitmap.Save(result, format);
        result.Seek(0, SeekOrigin.Begin);
        return result;
    }
}

Tambahkan Lisensi dan Kode Inisialisasi

Sekarang Anda dapat menambahkan file lisensi sebagai sumber yang disematkan dan menambahkan kode inisialisasi lisensi berikut ke metode utama di file Program.cs. Namun, jika Anda tidak memiliki lisensi, Anda dapat meminta lisensi sementara gratis.

Aspose.Drawing.License license = new Aspose.Drawing.License();
license.SetLicense("BlazorApp1.Client.Aspose.Drawing.NET.lic");

Jalankan Aplikasi

Jalankan aplikasi dari Microsoft Visual Studio IDE dan browser akan menampilkan gambar gradien seperti di bawah:

Kesimpulan

Pada artikel ini, Anda telah mempelajari cara menggunakan fungsionalitas System.Drawing di aplikasi Blazor WebAssembly. Anda dapat mengunjungi ruang dokumentasi untuk detail lebih lanjut tentang fitur yang ditawarkan oleh API. Selain itu, hubungi kami melalui forum jika Anda perlu mendiskusikan kebutuhan atau masalah Anda.

Lihat juga

Menggunakan System.Drawing dengan .NET 6 pada Platform non-Windows