System.Drawing в приложении Blazor WebAssembply C#

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

Создание проекта приложения C# Blazor WebAssembly

В интегрированной среде разработки Microsoft Visual Studio создайте приложение 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] (https://blog.aspose.com/ru/2022/03/09/system.drawing-with-dotnet6-non-windows/)