System.Drawing em Blazor WebAssembply App C#

A estrutura Blazor é amplamente usada para criar UI da Web interativa e reutilizável em tecnologias da Web. Além disso, os aplicativos Blazor WebAssembly são executados diretamente no navegador em um tempo de execução .NET baseado em WebAssembly. Este artigo aborda como usar a biblioteca System.Drawing em um aplicativo Blazor WebAssembly. A API pode ser usada para desenhar strings de texto, imagens, gráficos vetoriais, etc. Vejamos este artigo sob os seguintes títulos para saber mais detalhes:

Criar um projeto de aplicativo C# Blazor WebAssembly

No Microsoft Visual Studio IDE, crie um aplicativo Blazor WebAssembly. Pressione o botão ‘Avançar’ e marque as caixas de seleção .NET 5.0 e ASP.NET Core conforme as capturas de tela a seguir.

Aplicativo Blazor WebAssembly
System.Drawing Blazor

Atualizar as referências do projeto

Navegue na galeria NuGet e configure o pacote Aspose.Drawing para ser adicionado como a dependência do projeto.

Adicione o código para desenhar uma imagem

Substitua o conteúdo do arquivo Pages/Index.razor pelo seguinte trecho de código para criar uma imagem contendo o desenho.

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

Adicione a licença e o código de inicialização

Agora você pode adicionar o arquivo de licença como um recurso integrado e adicionar o seguinte código de inicialização de licença ao método principal no arquivo Program.cs. No entanto, caso você não tenha uma licença, poderá solicitar uma licença temporária gratuita.

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

Execute o aplicativo

Execute o aplicativo a partir do Microsoft Visual Studio IDE e o navegador mostrará a imagem gradiente conforme abaixo:

Conclusão

Neste artigo, você aprendeu como usar a funcionalidade System.Drawing no aplicativo Blazor WebAssembly. Você pode visitar o espaço documentação para obter mais detalhes sobre os recursos oferecidos pela API. Além disso, entre em contato conosco por meio do fórum caso precise discutir qualquer um dos seus requisitos ou preocupações.

Veja também

Usando System.Drawing com .NET 6 em uma plataforma não Windows