System.Drawing dans Blazor WebAssembply App C#

Le framework Blazor est largement utilisé pour créer une interface utilisateur Web interactive et réutilisable dans les technologies Web. De plus, les applications Blazor WebAssembly s’exécutent directement dans le navigateur sur un environnement d’exécution .NET basé sur WebAssembly. Cet article explique comment utiliser la bibliothèque System.Drawing dans une application Blazor WebAssembly. L’API peut être utilisée pour dessiner des chaînes de texte, des images, des graphiques vectoriels, etc. Passons en revue cet article sous les rubriques suivantes pour en savoir plus :

Créer un projet d’application C# Blazor WebAssembly

Dans Microsoft Visual Studio IDE, créez une application Blazor WebAssembly. Appuyez sur le bouton “Suivant”, puis cochez les cases .NET 5.0 et ASP.NET Core selon les captures d’écran suivantes.

Application Blazor WebAssembly
System.Drawing Blazor

Mettre à jour les références du projet

Parcourez la galerie NuGet et configurez le package Aspose.Drawing à ajouter en tant que dépendance du projet.

Ajouter le code pour dessiner une image

Remplacez le contenu du fichier Pages/Index.razor par l’extrait de code suivant pour créer une image contenant le dessin.

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

Ajouter la licence et le code d’initialisation

Vous pouvez maintenant ajouter le fichier de licence en tant que ressource intégrée et ajouter le code d’initialisation de licence suivant à la méthode principale dans le fichier Program.cs. Cependant, si vous n’avez pas de licence, vous pouvez demander une licence temporaire gratuite.

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

Exécutez l’application

Exécutez l’application à partir de Microsoft Visual Studio IDE et le navigateur affichera l’image dégradée comme ci-dessous :

Conclusion

Dans cet article, vous avez appris à utiliser la fonctionnalité System.Drawing dans l’application Blazor WebAssembly. Vous pouvez visiter l’espace documentation pour plus de détails sur les fonctionnalités offertes par l’API. De plus, veuillez nous contacter via le forum au cas où vous auriez besoin de discuter de l’une de vos exigences ou préoccupations.

Voir également

Utilisation de System.Drawing avec .NET 6 sur une plate-forme non Windows