C# 網頁截圖完整實作：WebBrowser 控制項離屏渲染與縮略圖生成

核心架構

• WebBrowser 控制項：WinForms 內嵌 IE/Edge (IE 模式) 渲染引擎，支援 `DrawToBitmap` 離屏繪製。
• STA 執行緒：WebBrowser 單執行緒套間模型，**必須在 STA 執行緒**建立與操作。
• 流程：建立 STA 執行緒 → 實例化 WebBrowser → `Navigate` → 等待 `DocumentCompleted` → `DrawToBitmap` → 縮放儲存。

完整可用類別

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Threading;
using System.Windows.Forms;

public class WebPageScreenshot
{
    public Bitmap Capture(string url, int viewportWidth, int viewportHeight, int outputWidth, int outputHeight, int timeoutMs = 30000)
    {
        Bitmap result = null;
        Exception error = null;
        var done = new ManualResetEvent(false);

        var thread = new Thread(() =>
        {
            try
            {
                Application.SetCompatibleTextRenderingDefault(false);
                using (var browser = new WebBrowser())
                {
                    browser.ScrollBarsEnabled = false;
                    browser.Size = new Size(viewportWidth, viewportHeight);
                    browser.ScriptErrorsSuppressed = true;

                    browser.DocumentCompleted += (s, e) =>
                    {
                        if (browser.ReadyState == WebBrowserReadyState.Complete)
                        {
                            // 1. 完整視口位圖
                            var full = new Bitmap(viewportWidth, viewportHeight);
                            browser.DrawToBitmap(full, new Rectangle(0, 0, viewportWidth, viewportHeight));

                            // 2. 縮放至目標尺寸 (高品質雙線性插值)
                            var thumb = new Bitmap(outputWidth, outputHeight);
                            using (var g = Graphics.FromImage(thumb))
                            {
                                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                                g.DrawImage(full, 0, 0, outputWidth, outputHeight);
                            }
                            full.Dispose();
                            result = thumb;
                            done.Set();
                        }
                    };

                    browser.Navigate(url);
                    Application.Run(); // 啟動訊息迴圈
                }
            }
            catch (Exception ex)
            {
                error = ex;
                done.Set();
            }
        });

        thread.SetApartmentState(ApartmentState.STA);
        thread.IsBackground = true;
        thread.Start();

        if (!done.WaitOne(timeoutMs))
        {
            thread.Abort(); // 強制結束
            throw new TimeoutException($"網頁截圖逾時 ({timeoutMs}ms)");
        }
        if (error != null) throw error;
        return result;
    }
}

ASP.NET / 服務端呼叫範例

public async Task CapturePageAsync(string url)
{
    return await Task.Run(() =>
    {
        var capture = new WebPageScreenshot();
        using (var bmp = capture.Capture(url, 1280, 720, 640, 360))
        using (var ms = new System.IO.MemoryStream())
        {
            bmp.Save(ms, ImageFormat.Jpeg);
            return ms.ToArray();
        }
    });
}

關鍵限制與替代方案

現代化推薦：Puppeteer Sharp

// NuGet: PuppeteerSharp
using PuppeteerSharp;

public async Task CaptureModernAsync(string url)
{
    await new BrowserFetcher().DownloadAsync(); // 首次下載 Chromium
    using var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true });
    using var page = await browser.NewPageAsync();
    await page.SetViewportAsync(new ViewPortOptions { Width = 1280, Height = 720 });
    await page.GoToAsync(url, WaitUntilNavigation.Networkidle0);
    return await page.ScreenshotDataAsync(new ScreenshotOptions { FullPage = false });
}

總結

傳統 `WebBrowser.DrawToBitmap` 方案**僅適用於舊版 IE 相容頁面、Windows 桌面/Server (含 Desktop Experience)**。新專案**強烈建議改用 Puppeteer Sharp / Playwright Sharp**，支援現代 Web 標準、無頭模式、容器化部署、截圖品質更高、API 更豐富 (PDF 生成、網路攔截、效能分析等)。

1. 上一篇文章： C# 中文取拼音首字母 (GB2312 區位碼對照) 完整實作
2. 下一篇文章： C# IP 路由判斷實作：子網遮罩與網路位址比對演算法

關於C#

C# 委派、事件與匿名方法完整教學：從基礎到進階應用模式

委派：型別安全的函式指標 委派是一個參考型別，封裝方法簽章（

C# 設計模式深度解析：訪問者模式完整實作指南

前言 在軟體開發中，當我們需要對一個複雜的物件結構執行各種操

C# 命名空間進階：巢狀結構、同名方法區隔與別名應用

命名空間是 C# 組織程式碼、避免類別名稱衝突的核心機制。繼

LINQ to SQL 入門實戰（二）：環境建置、Northwind 資料庫準備與範例專案設定

安裝需求 VS2008 Beta 2：下載連結 若為 VS