System.Drawing in Blazor WebAssembly App C#

Das Blazor-Framework wird häufig verwendet, um interaktive und wiederverwendbare Web-Benutzeroberflächen in Webtechnologien zu erstellen. Darüber hinaus werden Blazor WebAssembly-Apps direkt im Browser auf einer WebAssembly-basierten .NET-Laufzeit ausgeführt. In diesem Artikel wird beschrieben, wie Sie die System.Drawing-Bibliothek in einer Blazor WebAssembly-App verwenden. Die API kann verwendet werden, um Textzeichenfolgen, Bilder, Vektorgrafiken usw. zu zeichnen. Lassen Sie uns diesen Artikel unter den folgenden Überschriften durchgehen, um weitere Details zu erfahren:

Erstellen Sie ein C# Blazor WebAssembly-App-Projekt

Erstellen Sie in der Microsoft Visual Studio-IDE eine Blazor WebAssembly-App. Klicken Sie auf die Schaltfläche „Weiter“ und markieren Sie dann die Kontrollkästchen für .NET 5.0 und ASP.NET Core, wie in den folgenden Screenshots gezeigt.

Blazor WebAssembly-App
System.Zeichnung Blazor

Aktualisieren Sie die Projektreferenzen

Durchsuchen Sie die NuGet-Galerie und konfigurieren Sie das Aspose.Drawing-Paket, das als Projektabhängigkeit hinzugefügt werden soll.

Fügen Sie den Code hinzu, um ein Bild zu zeichnen

Ersetzen Sie den Inhalt der Datei „Pages/Index.razor“ durch den folgenden Codeausschnitt, um ein Bild zu erstellen, das die Zeichnung enthält.

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

Fügen Sie den Lizenz- und Initialisierungscode hinzu

Jetzt können Sie die Lizenzdatei als eingebettete Ressource hinzufügen und den folgenden Lizenzinitialisierungscode zur Hauptmethode in der Datei „Program.cs“ hinzufügen. Falls Sie jedoch keine Lizenz haben, können Sie eine kostenlose temporäre Lizenz anfordern.

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

Führen Sie die Anwendung aus

Führen Sie die Anwendung von der Microsoft Visual Studio IDE aus und der Browser zeigt das Verlaufsbild wie folgt an:

Fazit

In diesem Artikel haben Sie gelernt, wie Sie die System.Drawing-Funktionalität in der Blazor WebAssembly-Anwendung verwenden. Weitere Informationen zu den von der API angebotenen Funktionen finden Sie im Bereich Dokumentation. Wenden Sie sich außerdem bitte über das Forum an uns, falls Sie Ihre Anforderungen oder Bedenken besprechen müssen.

Siehe auch

Verwendung von System.Drawing mit .NET 6 auf einer Nicht-Windows-Plattform