User Tools

Site Tools


Action disabled: source
blog:2025-04-18-001



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();
    
    }

Reference

TAGS

  • 3 person(s) visited this page until now.

blog/2025-04-18-001.txt · Last modified: 2025/04/18 11:54 by jethro