System.Drawing nell'app Blazor WebAssembply C#

Il framework Blazor è ampiamente usato per creare un’interfaccia utente Web interattiva e riutilizzabile nelle tecnologie Web. Inoltre, le app Blazor WebAssembly vengono eseguite direttamente nel browser in un runtime .NET basato su WebAssembly. Questo articolo illustra come usare la libreria System.Drawing in un’app Blazor WebAssembly. L’API può essere utilizzata per disegnare stringhe di testo, immagini, grafica vettoriale, ecc. Esaminiamo questo articolo sotto i seguenti titoli per saperne di più dettagli:

Creare un progetto di app WebAssembly C# Blazor

In Microsoft Visual Studio IDE creare un’app Blazor WebAssembly. Premi il pulsante “Avanti”, quindi contrassegna le caselle di controllo .NET 5.0 e ASP.NET Core come nelle schermate seguenti.

App Blazer WebAssembly
System.Drawing Blazor

Aggiorna i riferimenti del progetto

Sfoglia la galleria NuGet e configura il pacchetto Aspose.Drawing da aggiungere come dipendenza del progetto.

Aggiungi il codice per disegnare un’immagine

Sostituisci il contenuto del file Pages/Index.razor con il frammento di codice seguente per creare un’immagine contenente il disegno.

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

Aggiungere la licenza e il codice di inizializzazione

Ora è possibile aggiungere il file di licenza come risorsa incorporata e aggiungere il seguente codice di inizializzazione della licenza al metodo principale nel file Program.cs. Tuttavia, nel caso in cui non si disponga di una licenza, è possibile richiedere una licenza temporanea gratuita.

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

Esegui l’applicazione

Esegui l’applicazione dall’IDE di Microsoft Visual Studio e il browser mostrerà l’immagine del gradiente come di seguito:

Conclusione

In questo articolo è stato appreso come utilizzare la funzionalità System.Drawing nell’applicazione Blazor WebAssembly. Puoi visitare lo spazio documentazione per maggiori dettagli sulle funzionalità offerte dall’API. Inoltre, contattaci tramite il forum nel caso in cui tu abbia bisogno di discutere delle tue esigenze o preoccupazioni.

Guarda anche

Utilizzo di System.Drawing con .NET 6 su una piattaforma non Windows