System.Drawing i Blazor WebAssembply App C#

Blazor-ramverket används ofta för att bygga interaktiva och återanvändbara webbgränssnitt i webbteknologier. Dessutom körs Blazor WebAssembly-appar direkt i webbläsaren på en WebAssembly-baserad .NET-runtime. Den här artikeln beskriver hur du använder System.Drawing-biblioteket i en Blazor WebAssembly-app. API:et kan användas för att rita textsträngar, bilder, vektorgrafik, etc. Låt oss gå igenom den här artikeln under följande rubriker för att lära oss mer detaljer:

Skapa ett C# Blazor WebAssembly-appprojekt

Skapa en Blazor WebAssembly-app i Microsoft Visual Studio IDE. Tryck på “Nästa”-knappen och markera sedan kryssrutorna .NET 5.0 och ASP.NET Core enligt följande skärmdumpar.

Blazor WebAssembly App
System.Drawing Blazor

Uppdatera projektreferenserna

Bläddra i NuGet-galleriet och konfigurera Aspose.Drawing-paketet för att läggas till som projektberoende.

Lägg till koden för att rita en bild

Byt ut innehållet i filen Pages/Index.razor med följande kodavsnitt för att skapa en bild som innehåller ritningen.

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

Lägg till licensen och initieringskoden

Nu kan du lägga till licensfilen som en inbäddad resurs och lägga till följande licensinitieringskod till huvudmetoden i filen Program.cs. Men om du inte har en licens kan du begära en gratis tillfällig licens.

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

Kör applikationen

Kör programmet från Microsoft Visual Studio IDE och webbläsaren kommer att visa gradientbilden enligt nedan:

Slutsats

I den här artikeln har du lärt dig hur du använder System.Drawing-funktionen i Blazor WebAssembly-applikationen. Du kan besöka utrymmet dokumentation för mer information om funktionerna som erbjuds av API:et. Dessutom, vänligen kontakta oss via forumet om du behöver diskutera några av dina krav eller problem.

Se även

Använda System.Drawing med .NET 6 på en icke-Windows-plattform