User Tools

Site Tools


Action disabled: revisions
study:cs-webbrowser:20250418-001:index

C# CefSharp 實現整頁截圖解析度和頁面一致 (2025-04-18)

  • C# CefSharp 如何使用
    • CefSharp.DevTools.Emulation.EmulationClient.SetDeviceMetricsOverrideAsync
    • CefSharp.DevTools.Emulation.EmulationClient.ClearDeviceMetricsOverrideAsync
    • 實現整頁截圖 將模擬裝置解析度的高度改成和頁面高度一致
  • 要使用 CefSharp 的 EmulationClient 來實現整頁截圖,並將模擬裝置解析度的高度設置為與頁面高度一致,您可以遵循以下步驟:

步驟概述

  • 設置 CefSharp:確保已經在項目中安裝並設置了 CefSharp。
  • 模擬裝置解析度:使用 SetDeviceMetricsOverrideAsync 方法設置設備的解析度。
  • 獲取頁面高度:使用 JavaScript 獲取頁面的完整高度。
  • 清除設備度量:在截圖後,使用 ClearDeviceMetricsOverrideAsync 方法清除設備度量設置。

範例程式碼

  • 以下是如何實現的範例程式碼:
  • using System;
    using System.Threading.Tasks;
    using System.Windows.Forms;
    using CefSharp;
    using CefSharp.WinForms;
    
    public class MyForm : Form
    {
        private ChromiumWebBrowser browser;
    
        public MyForm()
        {
            InitializeComponent();
            InitializeBrowser();
        }
    
        private void InitializeComponent()
        {
            this.Text = "CefSharp Screenshot Example";
            this.Width = 800;
            this.Height = 600;
        }
    
        private void InitializeBrowser()
        {
            var settings = new CefSettings();
            Cef.Initialize(settings);
            browser = new ChromiumWebBrowser("https://example.com")
            {
                Dock = DockStyle.Fill
            };
            this.Controls.Add(browser);
        }
    
        private async Task TakeScreenshotAsync()
        {
            // 獲取頁面高度
            var pageHeight = await browser.EvaluateScriptAsync("document.body.scrollHeight");
            if (pageHeight.Success)
            {
                var height = (int)(long)pageHeight.Result;
    
                // 設置模擬裝置解析度
                await browser.GetDevToolsClient().Emulation.SetDeviceMetricsOverrideAsync(800, height, 1.0, true);
    
                // 截圖
                var screenshot = await browser.ScreenshotAsync();
    
                // 保存截圖
                screenshot.Save("screenshot.png");
    
                // 清除設備度量
                await browser.GetDevToolsClient().Emulation.ClearDeviceMetricsOverrideAsync();
            }
        }
    
        protected override async void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            await Task.Delay(2000); // 等待頁面加載完成
            await TakeScreenshotAsync();
        }
    
        protected override void OnFormClosing(FormClosingEventArgs e)
        {
            Cef.Shutdown();
            base.OnFormClosing(e);
        }
    
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run(new MyForm());
        }
    }

說明

  • 初始化 CefSharp:在 InitializeBrowser 方法中,初始化 CefSharp 並加載一個網頁。
  • 獲取頁面高度:
    • 使用 EvaluateScriptAsync 方法執行 JavaScript 來獲取頁面的完整高度(document.body.scrollHeight)。
  • 設置設備度量:
    • 使用 SetDeviceMetricsOverrideAsync 方法設置設備的寬度和高度,這裡的高度設置為獲取的頁面高度。
  • 截圖:
    • 使用 ScreenshotAsync 方法截取整個頁面並保存為 PNG 文件。
  • 清除設備度量:
    • 截圖完成後,使用 ClearDeviceMetricsOverrideAsync 方法清除設備度量設置。

注意事項

  • 確保 CefSharp 的版本支持所使用的 API。
  • 根據需要調整設備的寬度和其他參數。
  • 在實際使用中,可能需要考慮異常處理和其他邊界情況。
  • 這樣,就可以使用 CefSharp 實現整頁截圖,並將模擬裝置解析度的高度設置為與頁面高度一致!

Local Backup

study/cs-webbrowser/20250418-001/index.txt · Last modified: 2025/04/18 17:59 by jethro