如何在后台服务中将Blazor应用渲染为图片文件

针对你的需求（无交互式会话、后台自动渲染Blazor页面为指定尺寸图片），以下是两种可行的技术方案：

方案一：使用PuppeteerSharp（.NET无头浏览器工具） #

PuppeteerSharp是Chrome无头模式的.NET封装，完全支持后台运行，无需用户交互，可精准控制视口尺寸和页面加载状态。

步骤： #

1. 安装NuGet包：PuppeteerSharp
2. 编写后台服务代码（可集成到.NET Worker Service中）：

using PuppeteerSharp;

public class EInkScreenshotWorker : BackgroundService
{
    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        // 首次运行自动下载适配平台的Chrome内核
        await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultChromiumRevision);

        while (!stoppingToken.IsCancellationRequested)
        {
            using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
            {
                Headless = true,
                Args = new[] { "--no-sandbox", "--disable-setuid-sandbox" } // 适配Raspberry Pi Linux环境
            });
            using var page = await browser.NewPageAsync();
            
            // 设置E-Ink屏幕对应的视口尺寸（根据你的屏幕参数调整）
            await page.SetViewportAsync(new ViewPortOptions
            {
                Width = 800,
                Height = 600
            });

            // 导航到你的Blazor温度展示页面
            await page.GoToAsync("http://localhost:5000/temperature-dashboard", new NavigationOptions
            {
                WaitUntil = new[] { WaitUntilNavigation.Networkidle0 } // 等待页面资源完全加载
            });

            // 可选：等待Blazor组件渲染完成（比如等待温度数据元素出现）
            await page.WaitForSelectorAsync("#temp-value");

            // 保存截图到指定路径
            await page.ScreenshotAsync("/home/pi/eink-temp.png", new ScreenshotOptions
            {
                FullPage = false, // 仅截取视口大小，匹配屏幕尺寸
                Type = ScreenshotType.Png
            });

            await browser.CloseAsync();

            // 按需求设置刷新间隔（比如5分钟一次）
            await Task.Delay(TimeSpan.FromMinutes(5), stoppingToken);
        }
    }
}

方案二：使用Playwright（微软官方自动化工具） #

Playwright是微软推出的跨浏览器自动化工具，API设计更现代，对Blazor这类SPA的渲染等待支持更灵活。

步骤： #

1. 安装NuGet包：Microsoft.Playwright
2. 首次运行时执行命令安装浏览器内核：playwright install chrome
3. 编写后台服务代码：

using Microsoft.Playwright;

public class PlaywrightScreenshotWorker : BackgroundService
{
    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        using var playwright = await Playwright.CreateAsync();
        await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
        {
            Headless = true,
            Args = new[] { "--no-sandbox" }
        });

        while (!stoppingToken.IsCancellationRequested)
        {
            var page = await browser.NewPageAsync();
            await page.SetViewportSizeAsync(800, 600); // 匹配E-Ink屏幕尺寸
            await page.GotoAsync("http://localhost:5000/temperature-dashboard", new PageGotoOptions
            {
                WaitUntil = WaitUntilState.NetworkIdle
            });
            await page.WaitForSelectorAsync("#temp-value"); // 等待数据渲染完成
            await page.ScreenshotAsync(new PageScreenshotOptions
            {
                Path = "/home/pi/eink-temp.png",
                FullPage = false
            });
            await page.CloseAsync();

            await Task.Delay(TimeSpan.FromMinutes(5), stoppingToken);
        }
    }
}

关键说明 #

• 你提到的Blazor-Screenshot依赖前端浏览器API，必须在交互式会话中触发，确实不适合后台自动化场景，上述两种无头浏览器方案才是正确方向。
• 部署到Raspberry Pi 4时，需安装Chrome依赖库（Debian/Ubuntu系统执行：sudo apt install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound2）。
• Blazor应用可部署为静态Web应用或服务器端渲染应用，只要无头浏览器能通过内网地址访问即可。

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