System.Drawing w aplikacji Blazor WebAssembply C#

Platforma Blazor jest szeroko stosowana do tworzenia interaktywnych i wielokrotnego użytku sieciowego interfejsu użytkownika w technologiach internetowych. Ponadto aplikacje Blazor WebAssembly działają bezpośrednio w przeglądarce w środowisku wykonawczym .NET opartym na WebAssembly. W tym artykule opisano sposób korzystania z biblioteki System.Drawing w aplikacji Blazor WebAssembly. Interfejs API może być używany do rysowania ciągów tekstowych, obrazów, grafiki wektorowej itp. Przejrzyjmy ten artykuł pod następującymi nagłówkami, aby poznać więcej szczegółów:

Utwórz projekt aplikacji C# Blazor WebAssembly

W Microsoft Visual Studio IDE Utwórz aplikację Blazor WebAssembly. Naciśnij przycisk „Dalej”, a następnie zaznacz pola wyboru .NET 5.0 i ASP.NET Core zgodnie z poniższymi zrzutami ekranu.

Aplikacja Blazor WebAssembly
System.Drawing Blazor

Zaktualizuj odniesienia do projektu

Przejrzyj galerię NuGet i skonfiguruj pakiet Aspose.Drawing, który ma zostać dodany jako zależność projektu.

Dodaj kod, aby narysować obraz

Zastąp zawartość pliku Pages/Index.razor następującym fragmentem kodu, aby utworzyć obraz zawierający rysunek.

@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;
    }
}

Dodaj licencję i kod inicjujący

Teraz możesz dodać plik licencji jako zasób osadzony i dodać następujący kod inicjujący licencję do metody main w pliku Program.cs. Jeśli jednak nie masz licencji, możesz poprosić o bezpłatną tymczasową licencję.

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

Uruchom aplikację

Uruchom aplikację z Microsoft Visual Studio IDE, a przeglądarka wyświetli obraz gradientu, jak poniżej:

Wniosek

W tym artykule nauczyłeś się korzystać z funkcji System.Drawing w aplikacji Blazor WebAssembly. Możesz odwiedzić dokumentację, aby uzyskać więcej informacji na temat funkcji oferowanych przez interfejs API. Ponadto skontaktuj się z nami za pośrednictwem forum, jeśli chcesz omówić swoje wymagania lub wątpliwości.

Zobacz też

Używanie System.Drawing z .NET 6 na platformie innej niż Windows