我可以使用 Blazor Client 以编程方式生成和显示位图吗？

Question

有什么方法可以在运行时生成位图，计算每个像素的 RGBA 值，然后在使用 Blazor Client 的上下文中在 UI 上显示该位图？

Answer 1

您可以使用 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 Whosebug.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;
}

我可以使用 Blazor Client 以编程方式生成和显示位图吗？

Can I programmatically generate and show a bitmap using Blazor Client?

c#

blazor

blazor-client-side