How to Take Screenshots with C#: Playwright, PuppeteerSharp, and API

bash
dotnet add package PuppeteerSharp

csharp
using PuppeteerSharp;

var browserFetcher = new BrowserFetcher();
await browserFetcher.DownloadAsync();

await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = true
});

await using var page = await browser.NewPageAsync();
await page.SetViewportAsync(new ViewPortOptions { Width = 1440, Height = 900 });
await page.GoToAsync("https://example.com", WaitUntilNavigation.Networkidle0);
await page.ScreenshotAsync("screenshot.png");

csharp
await page.ScreenshotAsync("full_page.png", new ScreenshotOptions { FullPage = true });

bash
dotnet add package Microsoft.Playwright
pwsh bin/Debug/net8.0/playwright.ps1 install chromium

csharp
using Microsoft.Playwright;

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync(new BrowserNewPageOptions
{
    ViewportSize = new ViewportSize { Width = 1440, Height = 900 }
});

await page.GotoAsync("https://example.com", new PageGotoOptions
{
    WaitUntil = WaitUntilState.NetworkIdle
});

await page.ScreenshotAsync(new PageScreenshotOptions { Path = "screenshot.png" });

csharp
await page.ScreenshotAsync(new PageScreenshotOptions
{
    Path = "full_page.png",
    FullPage = true
});

csharp
var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
    ViewportSize = new ViewportSize { Width = 1440, Height = 900 },
    ColorScheme = ColorScheme.Dark
});
var page = await context.NewPageAsync();
await page.GotoAsync("https://example.com");
await page.ScreenshotAsync(new PageScreenshotOptions { Path = "dark.png" });

csharp
await page.GotoAsync("https://example.com");
await page.WaitForSelectorAsync("#main-content");
await page.ScreenshotAsync(new PageScreenshotOptions { Path = "screenshot.png" });

csharp
using var httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.Add("x-api-key", "sk_live_your_api_key");

var query = new Dictionary<string, string>
{
    ["url"] = "https://example.com",
    ["width"] = "1440",
    ["height"] = "900",
    ["type"] = "png"
};

var queryString = string.Join("&", query.Select(kv => $"{kv.Key}={Uri.EscapeDataString(kv.Value)}"));
var response = await httpClient.GetAsync($"https://screenshotapi.to/api/v1/screenshot?{queryString}");

response.EnsureSuccessStatusCode();
var imageBytes = await response.Content.ReadAsByteArrayAsync();
await File.WriteAllBytesAsync("screenshot.png", imageBytes);

csharp
public class ScreenshotService
{
    private readonly HttpClient _httpClient;

    public ScreenshotService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task<byte[]> CaptureAsync(string url, ScreenshotOptions? options = null)
    {
        options ??= new ScreenshotOptions();

        var query = new Dictionary<string, string>
        {
            ["url"] = url,
            ["width"] = options.Width.ToString(),
            ["height"] = options.Height.ToString(),
            ["type"] = options.Format
        };

        if (options.FullPage)
            query["fullPage"] = "true";
        if (options.ColorScheme != null)
            query["colorScheme"] = options.ColorScheme;

        var queryString = string.Join("&", query.Select(kv => $"{kv.Key}={Uri.EscapeDataString(kv.Value)}"));
        var response = await _httpClient.GetAsync($"https://screenshotapi.to/api/v1/screenshot?{queryString}");

        response.EnsureSuccessStatusCode();
        return await response.Content.ReadAsByteArrayAsync();
    }
}

public class ScreenshotOptions
{
    public int Width { get; set; } = 1440;
    public int Height { get; set; } = 900;
    public string Format { get; set; } = "png";
    public bool FullPage { get; set; }
    public string? ColorScheme { get; set; }
}

csharp
builder.Services.AddHttpClient<ScreenshotService>(client =>
{
    client.DefaultRequestHeaders.Add("x-api-key", builder.Configuration["ScreenshotApi:Key"]);
});

csharp
app.MapGet("/api/preview", async (string url, ScreenshotService screenshots) =>
{
    var image = await screenshots.CaptureAsync(url, new ScreenshotOptions
    {
        Width = 1200,
        Height = 630,
        Format = "jpeg"
    });

    return Results.File(image, "image/jpeg");
});