2025-04-18 C# CefSharp 如何使用實現整頁截圖

在 CEFSharp 中，可以使用 CefSharp.DevTools.Emulation.EmulationClient.SetDeviceMetricsOverrideAsync 和 CefSharp.DevTools.Emulation.EmulationClient.ClearDeviceMetricsOverrideAsync 方法來模擬不同的設備，並實現整頁截圖。

這裡將提供一個完整的示例，展示如何設置設備度量、捕獲整頁截圖，然後清除設備度量。

初始化 CEF：確保 CEFSharp 已正確初始化。

設置設備度量：使用 SetDeviceMetricsOverrideAsync 方法來設置設備的寬度、高度和其他屬性。

捕獲整頁截圖：使用 ScreenshotAsync 方法來捕獲整頁截圖。

清除設備度量：使用 ClearDeviceMetricsOverrideAsync 方法來重置設備度量。

以下是一個完整的示例，展示如何使用這些方法來實現整頁截圖：

using System;
using System.Drawing;
using System.IO;
using System.Threading.Tasks;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;
using CefSharp.DevTools.Emulation;

public class MyForm : Form
{
    private ChromiumWebBrowser browser;
    private Button captureButton;

    public MyForm()
    {
        // 初始化 CEF
        Cef.Initialize(new CefSettings());

        // 創建 ChromiumWebBrowser 控制項
        browser = new ChromiumWebBrowser("https://www.example.com")
        {
            Dock = DockStyle.Fill
        };

        // 創建截圖按鈕
        captureButton = new Button
        {
            Text = "捕獲整頁截圖",
            Dock = DockStyle.Bottom
        };
        captureButton.Click += CaptureButton_Click;

        // 添加控制項到窗體
        this.Controls.Add(browser);
        this.Controls.Add(captureButton);
    }

    private async void CaptureButton_Click(object sender, EventArgs e)
    {
        var devToolsClient = browser.GetDevToolsClient();
        int width = 1920; // 設置頁面寬度
        int height = 1080; // 設置頁面高度
        double deviceScaleFactor = 1.0; // 設置縮放比例
        bool mobile = false; // 設置為非移動設備

        try
        {
            // 設置設備度量
            await devToolsClient.Emulation.SetDeviceMetricsOverrideAsync(width, height, deviceScaleFactor, mobile, null, null);

            // 捕獲整頁截圖
            var screenshot = await browser.ScreenshotAsync();

            // 保存截圖到文件
            string filePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Desktop), "fullpage_screenshot.png");
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await screenshot.SaveAsync(stream);
            }

            MessageBox.Show($"整頁截圖已保存到: {filePath}");
        }
        catch (Exception ex)
        {
            MessageBox.Show($"捕獲截圖時發生錯誤: {ex.Message}");
        }
        finally
        {
            // 清除設備度量
            await devToolsClient.Emulation.ClearDeviceMetricsOverrideAsync();
        }
    }

    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new MyForm());
    }
}

初始化 CEF：在應用程式啟動時初始化 CEF。

創建 ChromiumWebBrowser 控制項：這個控制項用來顯示網頁。

設置設備度量：在按鈕的點擊事件中，使用 SetDeviceMetricsOverrideAsync 方法設置設備的寬度、高度、縮放比例和是否為移動設備。

捕獲整頁截圖：使用 ScreenshotAsync 方法來捕獲整頁截圖，然後將其保存為 PNG 文件。

清除設備度量：在捕獲完成後，使用 ClearDeviceMetricsOverrideAsync 方法來重置設備度量。

確保在使用 CEFSharp 前已經正確安裝並配置了 CEFSharp 套件。

根據需要調整設備的寬度和高度，以確保捕獲整頁截圖。

捕獲的圖像將保存到桌面上，可以根據需要更改保存路徑。

通過這些步驟，就可以在 CEFSharp 中成功使用 SetDeviceMetricsOverrideAsync 和 ClearDeviceMetricsOverrideAsync 方法來實現整頁截圖！

CefSharp.DevTools.Page.PageClient pageClient = null;
private async void Test2()
{
	// 由 chrome page body 獲取頁面Size
	var pageHeight = await chrome.EvaluateScriptAsync("document.body.scrollHeight");
	var pageWidth = await chrome.EvaluateScriptAsync("document.body.scrollWidth");
	int height = (int)pageHeight.Result; // 設置頁面高度
	int width = (int)pageWidth.Result; // 設置頁面寬度
	long deviceScaleFactor = 1; // 設置縮放比例
	bool mobile = false; // 設置為非移動設備
	Console.WriteLine("Web Width = " + width.ToString() + ", " + "Height = " + height.ToString());

	//var vWindow = CefSharp.DevTools.Emulation.EmulationClient.SetDeviceMetricsOverrideAsync(1200,800,1,true);
	if (pageClient == null) 
	{
		await chrome.GetBrowser().GetDevToolsClient().Emulation.SetDeviceMetricsOverrideAsync(width, height, deviceScaleFactor, mobile, null, null);
		pageClient = chrome.GetBrowser().GetDevToolsClient().Page;
	}
	var result = await pageClient.CaptureScreenshotAsync(); if (result.Data != null)
	{
		MemoryStream ms = new MemoryStream(result.Data); ms.Write(result.Data, 0, result.Data.Length); 
		Image _Image = Image.FromStream(ms); //

		_Image.Save("output.png", ImageFormat.Png);
	}
	await chrome.GetBrowser().GetDevToolsClient().Emulation.ClearDeviceMetricsOverrideAsync();

}

3 person(s) visited this page until now.

Back