Blazor WebAssembly中使用BECanvasComponent实现非页面内图片渲染的技术问询

我明白你现在的困境——从Angular转Blazor WASM，要动态加载图片到Canvas但没法提前写img标签，BECanvas的DrawImageAsync又需要对应的图片引用。下面给你几个实用的解决方案：

方案1：通过JsRuntime动态创建Image对象并获取引用 #

这应该是最直接的适配方式，和你Angular里的逻辑最接近。你可以在JS里创建Image对象、加载完成后返回它的引用，然后在Blazor里传给BECanvas的方法。

步骤1：添加JS辅助函数 #

在你的wwwroot/index.html（或单独的JS文件）里加这段代码：

window.canvasUtils = {
    createAndLoadImage: async function(imageUrl) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = imageUrl;
            img.onload = () => resolve(img);
            img.onerror = (err) => reject(err);
        });
    }
};

步骤2：在Blazor组件中调用并使用 #

在你的Blazor组件里注入IJSRuntime，然后调用这个JS函数获取图片引用，再传给BECanvas的DrawImageAsync：

@inject IJSRuntime JsRuntime
@using BECanvas

<BECanvas @ref="_canvasRef" Width="800" Height="600" />

@code {
    private BECanvasComponent? _canvasRef;
    // 替换成你的实际尺寸参数
    private int drawWidth = 200;
    private int drawHeight = 200;
    private int left = 50;
    private int top = 50;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && _canvasRef != null)
        {
            try
            {
                // 动态创建并加载图片
                var imageElement = await JsRuntime.InvokeAsync<IJSObjectReference>("canvasUtils.createAndLoadImage", "/assets/ImageFile.jpg");
                
                // 获取Canvas上下文
                var context = await _canvasRef.GetContextAsync("2d");
                
                // 绘制图片，参数和你Angular里的对应
                await context.DrawImageAsync(imageElement, 0, 0, drawWidth, drawHeight, left, top, drawWidth, drawHeight);
                
                // 记得用完释放JS对象引用，避免内存泄漏
                await imageElement.DisposeAsync();
            }
            catch (Exception ex)
            {
                // 处理加载或绘制错误
                Console.WriteLine($"Error loading image: {ex.Message}");
            }
        }
    }
}

这里的关键是用IJSObjectReference来持有JS里创建的Image对象，BECanvas的DrawImageAsync是支持直接接收这个类型的引用的，不需要提前在页面里定义img标签。

方案2：切换到SkiaSharp（如果BECanvas限制太多） #

如果觉得通过JS交互有点繁琐，SkiaSharp确实是Blazor里处理Canvas渲染的成熟方案，它完全用C# API就能完成图片加载和绘制，不需要依赖JS的Image对象。

基本实现示例 #

首先安装SkiaSharp的Blazor包：

Install-Package SkiaSharp.Views.Blazor

然后在组件里使用：

@using SkiaSharp
@using SkiaSharp.Views.Blazor

<SKCanvasView @ref="_canvasView" OnPaintSurface="OnPaintSurface" Width="800" Height="600" />

@code {
    private SKCanvasView? _canvasView;
    // 替换成你的实际尺寸参数
    private int drawWidth = 200;
    private int drawHeight = 200;
    private int left = 50;
    private int top = 50;

    private async void OnPaintSurface(SKPaintSurfaceEventArgs args)
    {
        var surface = args.Surface;
        var canvas = surface.Canvas;
        canvas.Clear(SKColors.White);

        try
        {
            // 从资源加载图片（也可以从远程URL加载）
            using var httpClient = new HttpClient();
            var imageBytes = await httpClient.GetByteArrayAsync("/assets/ImageFile.jpg");
            using var bitmap = SKBitmap.Decode(imageBytes);
            
            // 绘制图片，参数对应你的需求
            canvas.DrawBitmap(bitmap, new SKRect(left, top, left + drawWidth, top + drawHeight));
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error drawing image: {ex.Message}");
        }
    }
}

SkiaSharp的好处是完全在C#层面操作，不需要和JS交互，而且它的绘图API功能非常强大，适合复杂的Canvas场景。如果你的应用后续有更多图形处理需求，切换到SkiaSharp会更省心。

方案3：BECanvas的内置图片加载方式（如果支持） #

有些Canvas库会提供自己的图片加载API，你可以去查一下BECanvas的文档，看是否有类似LoadImageAsync这样的方法，直接传入URL就能获取可用于绘制的图片对象。如果有的话，这会是最简洁的方式。

总结一下，方案1是最贴近你原有Angular逻辑的快速适配方案，方案2是长期更健壮的C#原生方案，你可以根据自己的项目需求选择。

内容的提问来源于stack exchange，提问作者Steve