Blazor Server返回JS数据时服务器断开连接问题排查

一、解决服务器断开连接的核心配置调整 #

你遇到的服务器断开问题，本质是Blazor Server依赖的SignalR连接有默认消息大小限制和超时设置，大图片转base64后的数据量远超默认阈值，直接触发了连接中断。

1. 调整SignalR最大消息大小 #

在Program.cs里修改SignalR配置，允许更大的消息传输：

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 50 * 1024 * 1024; // 设为50MB，可按需调整
    });

2. 延长连接超时时间 #

同样在Program.cs里配置Blazor的Circuit超时，避免处理大图片时超时断开：

builder.Services.AddServerSideBlazor()
    .AddCircuitOptions(options =>
    {
        options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(5);
        options.MaxRetainCycles = 10;
    });

另外，客户端的SignalR连接超时也可以在_Host.cshtml里调整：

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start({
        configureSignalR: function (builder) {
            builder.withUrl('/_blazor', {
                transport: signalR.HttpTransportType.WebSockets,
                timeout: 300000 // 5分钟超时
            });
        }
    });
</script>

二、实现层面的优化（减少大数据传输） #

直接把完整的base64从JS传回C#是低效且容易触发断开的，建议换个思路：

• 不要把处理后的base64传回服务器，而是在客户端直接更新img的src，完全跳过服务端通信。比如JS处理完canvas后，直接执行document.getElementById('your-img').src = canvas.toDataURL();，不需要通知C#。
• 如果必须把处理结果传回服务器，不要传base64，而是传Blob数据或者分块传输，不过本地运行场景下，直接客户端处理更高效。

三、纯C#处理图片的替代方案 #

既然你用了Excubo的Canvas封装，其实可以完全在C#里完成图片加载和处理，不需要依赖JS：

1. 用Excubo Canvas直接加载图片 #

Excubo Canvas支持从字节数组加载图片，你可以通过InputFile获取图片字节，然后在C#里初始化Canvas：

using var stream = file.OpenReadStream(maxAllowedSize: 30 * 1024 * 1024);
using var memoryStream = new MemoryStream();
await stream.CopyToAsync(memoryStream);
var bytes = memoryStream.ToArray();

// 初始化主Canvas
var mainCanvas = new Canvas(800, 600);
await mainCanvas.Context2D.DrawImageAsync(bytes, 0, 0);

// 初始化辅助Canvas
var helperCanvas = new Canvas(800, 600);
await helperCanvas.Context2D.DrawImageAsync(bytes, 0, 0);

// 处理像素数据（示例：获取主Canvas像素）
var imageData = await mainCanvas.Context2D.GetImageDataAsync(0, 0, 800, 600);
// 这里可以结合辅助Canvas的imageData做像素运算

// 处理完成后转base64设置到img
var base64 = await mainCanvas.ToDataURLAsync("image/png");
// 直接通过绑定设置img的src，比如绑定一个字符串属性
ImageSrc = base64;

2. 用ImageSharp等图片处理库替代Canvas #

如果不需要Canvas的实时交互，直接用ImageSharp在C#里处理图片更高效：

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

using var stream = file.OpenReadStream(30 * 1024 * 1024);
using var image = Image.Load<Rgba32>(stream);

// 示例处理：结合另一张图片（辅助图）做像素混合
using var helperImage = Image.Load<Rgba32>("辅助图路径或字节数组");
image.Mutate(x => x.DrawImage(helperImage, 0.5f, PixelColorBlendingMode.Normal));

// 转base64
using var ms = new MemoryStream();
await image.SaveAsPngAsync(ms);
var base64 = $"data:image/png;base64,{Convert.ToBase64String(ms.ToArray())}";
ImageSrc = base64;

关键提醒 #

本地运行Blazor Server时，虽然客户端和服务端在同一机器，但SignalR的消息限制依然生效，所以必须调整配置。另外，尽量避免在客户端和服务端之间传输大体积的base64数据，能在客户端处理的就直接在客户端完成，或者在服务端直接处理原始图片字节，不要走JS中转。

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