Blazor Hybrid WPF如何基于URL向WebView提供动态图片？

问题背景 #

将ASP.NET Core Web App转为Blazor Hybrid WPF应用时，原Web App通过Controller动态生成图片，使用<img src="/dynamic-imgs/387854.png" />即可展示。但在Blazor Hybrid中，WebView2的请求拦截逻辑对根路径的请求无效，硬编码https://0.0.0.0/作为前缀会触发404，推测是Blazor路由系统干扰了拦截后的响应。

解决方案 #

核心思路是不依赖域名前缀匹配请求，直接解析请求路径，绕过Blazor路由对本地静态资源的处理逻辑，同时正确构造WebView2的响应返回动态内容。

步骤1：修改WebView2请求拦截逻辑 #

不再硬编码域名，而是通过解析请求的Path判断是否为动态图片请求，同时调整响应构造的逻辑：

// 在WebView2初始化完成后添加拦截逻辑
webView.CoreWebView2.AddWebResourceRequestedFilter("/dynamic-imgs/*", CoreWebView2WebResourceContext.Image);
webView.CoreWebView2.WebResourceRequested += CoreWebView2_WebResourceRequested;

private void CoreWebView2_WebResourceRequested(object? sender, CoreWebView2WebResourceRequestedEventArgs args)
{
    var requestUri = new Uri(args.Request.Uri);
    // 只处理动态图片路径的请求
    if (!requestUri.PathAndQuery.StartsWith("/dynamic-imgs/"))
        return;

    var deferral = args.GetDeferral();
    try
    {
        // 提取图片ID（示例：从/dynamic-imgs/387854.png中获取387854）
        var imageId = Path.GetFileNameWithoutExtension(requestUri.LocalPath);
        
        // 替换为你的动态生成图片逻辑，这里示例生成一个简单的PNG
        using var imageStream = GenerateDynamicImage(imageId);
        if (imageStream == null)
        {
            args.Response = webView.CoreWebView2.Environment.CreateWebResourceResponse(
                null, 404, "Not Found", "");
            deferral.Complete();
            return;
        }

        // 包装流（使用你已有的ManagedStream）
        var managedStream = new ManagedStream(imageStream);
        // 设置正确的响应头
        var headers = "Content-Type: image/png";
        
        args.Response = webView.CoreWebView2.Environment.CreateWebResourceResponse(
            managedStream, 200, "OK", headers);
    }
    catch (Exception ex)
    {
        args.Response = webView.CoreWebView2.Environment.CreateWebResourceResponse(
            null, 500, "Internal Error", "");
    }
    finally
    {
        deferral.Complete();
    }
}

// 示例：动态生成图片的方法，替换为你的业务逻辑
private Stream GenerateDynamicImage(string imageId)
{
    // 这里模拟生成图片，实际场景可以根据ID从数据库/内存生成
    var bitmap = new Bitmap(200, 200);
    using var g = Graphics.FromImage(bitmap);
    g.Clear(Color.LightBlue);
    g.DrawString($"Image {imageId}", new Font("Arial", 12), Brushes.Black, new PointF(10, 10));
    
    var stream = new MemoryStream();
    bitmap.Save(stream, ImageFormat.Png);
    stream.Position = 0;
    return stream;
}

步骤2：保留并优化ManagedStream #

你已实现的ManagedStream可以继续使用，建议补充Dispose方法确保资源释放：

public class ManagedStream : Stream
{
    private readonly Stream _innerStream;

    public ManagedStream(Stream innerStream)
    {
        _innerStream = innerStream ?? throw new ArgumentNullException(nameof(innerStream));
    }

    public override bool CanRead => _innerStream.CanRead;
    public override bool CanSeek => _innerStream.CanSeek;
    public override bool CanWrite => _innerStream.CanWrite;
    public override long Length => _innerStream.Length;
    public override long Position { get => _innerStream.Position; set => _innerStream.Position = value; }

    public override void Flush() => _innerStream.Flush();
    public override long Seek(long offset, SeekOrigin origin) => _innerStream.Seek(offset, origin);
    public override void SetLength(long value) => _innerStream.SetLength(value);
    public override int Read(byte[] buffer, int offset, int count)
    {
        try
        {
            var read = _innerStream.Read(buffer, offset, count);
            if (read == 0)
                Dispose();
            return read;
        }
        catch
        {
            Dispose();
            throw;
        }
    }
    public override void Write(byte[] buffer, int offset, int count) => throw new NotImplementedException();

    protected override void Dispose(bool disposing)
    {
        if (disposing)
            _innerStream.Dispose();
        base.Dispose(disposing);
    }
}

关键说明 #

1. 请求匹配逻辑：直接通过requestUri.PathAndQuery判断路径，避免依赖具体的域名（如0.0.0.0），适配Blazor Hybrid不同版本的本地URI格式。
2. 资源类型过滤：使用CoreWebView2WebResourceContext.Image只拦截图片请求，减少不必要的拦截开销。
3. 动态生成逻辑：将原Controller中的图片生成逻辑迁移到GenerateDynamicImage方法中，直接返回流即可。
4. Deferral管理：必须正确调用deferral.Complete()，否则WebView2会等待响应超时。

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