Могу ли я программно сгенерировать и показать растровое изображение с помощью Blazor Client? - PullRequest
Новая
       5

Могу ли я программно сгенерировать и показать растровое изображение с помощью Blazor Client?

0 голосов
/ 25 марта 2020

Можно ли как-нибудь сгенерировать растровое изображение во время выполнения, рассчитав значение RGBA для каждого пикселя, а затем показать это растровое изображение в пользовательском интерфейсе в контексте использования Blazor Client?

1 Ответ

0 голосов
/ 25 марта 2020

Вы можете использовать ImageSharp, хотя это довольно медленно. Затем просто конвертируйте в base64 и используйте в качестве <img /> источника.

Обратите внимание, что при инициализации, по-видимому, существует ограничение (OnInitialized/OnParametersSet/OnAfterRender), и вы не сможете создать более 128x128x32, конвейер рендеринга остановится. Но если генератор кода запускается после того, как страница была сгенерирована, он, кажется, прекрасно работает даже с большими изображениями. Это медленно, хотя.

ImageGeneratorBase.razor.cs 

using System;
using Microsoft.AspNetCore.Components;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using SixLabors.Primitives;
using SixLabors.Shapes;
using System.IO;

namespace StackOverflow.Sample1.Shared {
    public class ImageGeneratorBase : ComponentBase {
        [Parameter]
        public int Width { get; set; }
        [Parameter]
        public int Height { get; set; }

        protected string Image64 { get; set; }

        public void Generate() {
            using (MemoryStream outStream = new MemoryStream())
            {
                using (Image img = new Image<Rgba32>(Width, Height))
                {
                    PathBuilder pathBuilder = new PathBuilder();
                    pathBuilder.SetOrigin(new PointF(0, 0));
                    pathBuilder.AddBezier(new PointF(Width / 5.0f, Height), new PointF(2 * Width / 5.0f, 0), new PointF(3 * Width / 5.0f, Height), new PointF(4 * Width / 5.0f, 0));
                    IPath path = pathBuilder.Build();

                    img.Mutate(ctx => ctx
                        .Fill(Color.Black)
                        .Draw(Color.White, 3, path)
                    );
                    img.SaveAsPng(outStream);

                }

                Image64 = "data:image/png;base64, " + Convert.ToBase64String(outStream.ToArray());
            }
            StateHasChanged();
        }
    }
}

ImageGenerator.razor 

@inherits ImageGeneratorBase
@if (Image64 != null) {
    <img src=@Image64 />
}

Index.razor 

@page "/"

<p>
    <Button @onclick=@(e => generator.Generate())>Generate image</Button>
</p>
<p>
    <ImageGenerator Width=256 Height=256 @ref=@generator />
</p>

@code {
    ImageGenerator generator;
}
...