基于ASP.NET Core的整页截图优化：画质无损下压缩体积

针对你提供的ASP.NET Core Puppeteer整页截图代码，以下是不损失画质前提下减小文件体积的优化方案，核心从截图格式、参数配置和代码逻辑三个方向调整：

优化核心点 #

• 优先使用WebP格式：WebP在相同画质下体积远小于PNG/JPG，支持无损/有损压缩，Puppeteer原生支持。
• 精准配置压缩参数：无损压缩完全保留画质，有损压缩可通过质量参数平衡体积与画质。
• 简化整页截图逻辑：利用Puppeteer内置的FullPage选项自动截取整页，替代手动计算页面高度的冗余代码。

优化后的完整代码 #

public async Task CaptureOptimizedFullPageScreenshot(string url, string outputPath)
{
    try
    {
        await new BrowserFetcher().DownloadAsync(BrowserTag.Latest);

        using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true }))
        using (var page = await browser.NewPageAsync())
        {
            // 设置初始视口，保证页面渲染正常
            await page.SetViewportAsync(new ViewPortOptions { Width = 1349, Height = 1080 });
            await page.GoToAsync(url, WaitUntilNavigation.Networkidle2);

            var screenshotOptions = new ScreenshotOptions
            {
                // 选择WebP格式，兼顾画质与体积
                Format = ScreenshotFormat.Webp,
                // 100为无损压缩，画质无损失；若需更小体积，可改为70-90（有损压缩，画质差异可忽略）
                Quality = 100,
                // 自动截取整页，无需手动计算页面高度
                FullPage = true,
                // 保留页面背景（如需透明背景可设为true）
                OmitBackground = false
            };

            await page.ScreenshotAsync(outputPath, screenshotOptions);
        }
    }
    catch (Exception ex)
    {
        _logger.LogError($"截图 '{url}' 时出错：{ex.Message}");
    }
    finally
    {
        _logger.LogInformation($"截图已成功保存至 '{outputPath}'");
    }
}

额外格式兼容方案 #

如果业务必须使用PNG或JPG格式，可调整以下参数：

• PNG优化：在ScreenshotOptions中设置Format = ScreenshotFormat.Png，并启用Compress = true，实现PNG无损压缩。
• JPG优化：设置Format = ScreenshotFormat.Jpeg，并将Quality设为70-90，在画质可接受的前提下大幅减小体积。

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