System.Drawing у Blazor WebAssembply App C#

Фреймворк Blazor широко використовується для створення інтерактивного та багаторазового веб-інтерфейсу користувача у веб-технологіях. Крім того, програми Blazor WebAssembly виконуються безпосередньо в браузері в середовищі виконання .NET на основі WebAssembly. У цій статті описано, як використовувати бібліотеку System.Drawing у програмі Blazor WebAssembly. API можна використовувати для малювання текстових рядків, зображень, векторної графіки тощо. Давайте проглянемо цю статтю під наступними заголовками, щоб дізнатися більше:

Створіть проект програми C# Blazor WebAssembly

У Microsoft Visual Studio IDE створіть програму Blazor WebAssembly. Натисніть кнопку «Далі», а потім позначте .NET 5.0 і ASP.NET Core, як показано на наступних знімках екрана.

Додаток Blazor WebAssembly
System.Drawing Blazor

Оновіть посилання на проект

Перегляньте галерею NuGet і налаштуйте пакет Aspose.Drawing, який буде додано як залежність проекту.

Додайте код для малювання зображення

Замініть вміст файлу Pages/Index.razor наступним фрагментом коду, щоб створити зображення, що містить малюнок.

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

Додайте ліцензію та код ініціалізації

Тепер ви можете додати файл ліцензії як вбудований ресурс і додати наступний код ініціалізації ліцензії до основного методу у файлі Program.cs. Однак, якщо у вас немає ліцензії, ви можете запросити безкоштовну тимчасову ліцензію.

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

Запустіть програму

Запустіть програму з Microsoft Visual Studio IDE, і браузер покаже градієнтне зображення, як показано нижче:

Висновок

У цій статті ви дізналися, як використовувати функцію System.Drawing у програмі Blazor WebAssembly. Ви можете відвідати розділ документація, щоб дізнатися більше про функції, які пропонує API. Крім того, зв’яжіться з нами через форум, якщо вам знадобиться обговорити будь-які ваші вимоги чи проблеми.

Дивись також

Використання System.Drawing із .NET 6 на платформі, відмінній від Windows