使用 CefSharp 从 Web 浏览器/网页截屏时异步等待同步事件/操作

Question

我想要做的是：

我有一个 CefSharp ChromiumWebBrowser（WPF 控件），我想在该浏览器中截取网页的屏幕截图。屏幕上的ChromiumWebBrowser 没有截图方法。但是我可以通过将事件处理程序附加到浏览器的OnPaint 事件来获得渲染。 这样我得到一个位图，它是屏幕截图。该过程基于此答案：https://*.com/a/54236602/2190492

现在我正在创建一个类CefSharpScreenshotRecorder，它应该负责截屏。它应该接受一个浏览器实例，将一个事件处理程序附加到OnPaint 事件，并获取位图。这个过程的所有状态都应该封装在CefSharpScreenshotRecorder 类中。 我希望能够异步使用我的课程。因为我们必须等到 OnPaint 事件被触发。当该事件被触发（并调用事件处理程序）时，事件处理程序中会提供一个位图。那么这个 Bitmap 应该是最初调用的异步方法的结果（比如CefSharpScreenshotRecorder.TakeScreenshot(...cefBrowserInstance...)。当然，一切都必须在不阻塞/滞后 UI 的情况下发生。

我对 C# 中的异步编程不是很熟悉。 我遇到的问题是我找不到一种方法来制作可等待的方法，该方法仅在调用时代表 OnPaint 事件处理程序返回。 我什至不知道是否存在任何代码功能来创建此逻辑。

Answer 1

这可以使用TaskCompletionSource 来实现。这样您就可以将同步（例如事件驱动）代码包装到异步方法中，而无需使用Task.Run。

class CefSharpScreenshotRecorder
{
  private TaskCompletionSource<System.Drawing.Bitmap> TaskCompletionSource { get; set; }

  public Task<System.Drawing.Bitmap> TakeScreenshotAsync(
    ChromiumWebBrowser browserInstance, 
    TaskCreationOptions optionalTaskCreationOptions = TaskCreationOptions.None)
  {
    this.TaskCompletionSource = new TaskCompletionSource<System.Drawing.Bitmap>(optionalTaskCreationOptions);

    browserInstance.Paint += GetScreenShotOnPaint;

    // Return Task instance to make this method awaitable
    return this.TaskCompletionSource.Task;
  }

  private void GetScreenShotOnPaint(object sender, PaintEventArgs e)
  { 
    (sender as ChromiumWebBrowser).Paint -= GetScreenShotOnPaint;

    System.Drawing.Bitmap newBitmap = new Bitmap(e.Width, e.Height, 4 * e.Width, PixelFormat.Format32bppPArgb, e.Buffer);

    // Optional: save the screenshot to the hard disk "MyPictures" folder
    var screenshotDestinationPath = Path.Combine(
      Environment.GetFolderPath(Environment.SpecialFolder.MyPictures), 
      "CefSharpBrowserScreenshot.png");
    newBitmap.Save(screenshotDestinationPath);

    // Create a copy of the bitmap, since the underlying buffer is reused by the library internals
    var bitmapCopy = new System.Drawing.Bitmap(newBitmap);

    // Set the Task.Status of the Task instance to 'RanToCompletion'
    // and return the result to the caller
    this.TaskCompletionSource.SetResult(bitmapCopy);
  }

  public BitmapImage ConvertToBitmapImage(System.Drawing.Bitmap bitmap)
  {
    using(var memoryStream = new MemoryStream())
    {
      bitmap.Save(memoryStream, ImageFormat.Png);
      memoryStream.Position = 0;

      BitmapImage bitmapImage = new BitmapImage();
      bitmapImage.BeginInit();
      bitmapImage.StreamSource = memoryStream;
      bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
      bitmapImage.EndInit();
      bitmapImage.Freeze();
    }
  }
}

使用示例（工作）：

MainWindow.xaml

<Window>
  <StackPanel>
    <Button Click="TakeScreenshot_OnClick" Height="50" Content="Take Screenshot"/>
    <ChromiumWebBrowser x:Name="ChromiumWebBrowser"
                        Width="500"
                        Height="500"
                        Address="https://*.com/a/57695630/3141792" />
    <Image x:Name="ScreenshotImage" />
  </StackPanel>
</Window>

MainWindow.xaml.cs

private async void TakeScreenshot_OnClick(object sender, RoutedEventArgs e)
{
  var cefSharpScreenshotRecorder = new CefSharpScreenshotRecorder();
  System.Drawing.Bitmap bitmap = await cefSharpScreenshotRecorder.TakeScreenshotAsync(this.ChromiumWebBrowser);

  this.ScreenshotImage.Source = cefSharpScreenshotRecorder.ConvertToBitmapImage(bitmap);
}

---

编辑

如果您只是对从网页拍摄快照感兴趣，请查看 CefSharp.OffScreen（可通过 NuGet 包管理器获得）。 ChromiumWebBrowser 类公开了一个ScreenshotAsync 方法，该方法返回一个可以使用的System.Drawing.Bitmap。 Here 是来自 GitHub 上的 project repository 的示例。

例子：

class CefSharpScreenshotRecorder
{
  private TaskCompletionSource<System.Drawing.Bitmap> TaskCompletionSource { get; set; }

  public async Task<System.Drawing.Bitmap> TakeScreenshotAsync(
    ChromiumWebBrowser browser, 
    string url, 
    TaskCreationOptions optionalTaskCreationOptions = TaskCreationOptions.None)
  {
    if (!string.IsNullOrEmpty(url))
    {
      throw new ArgumentException("Invalid URL", nameof(url));
    }

    this.TaskCompletionSource = new TaskCompletionSource<Bitmap>(optionalTaskCreationOptions);

    // Load the page. In the loaded event handler 
    // take the snapshot and return it asynchronously it to caller
    return await LoadPageAsync(browser, url);
  }

  private Task<System.Drawing.Bitmap> LoadPageAsync(IWebBrowser browser, string url)
  {
    browser.LoadingStateChanged += GetScreenShotOnLoadingStateChanged;

    browser.Load(url);

    // Return Task instance to make this method awaitable
    return this.TaskCompletionSource.Task;
  }

  private async void GetScreenShotOnLoadingStateChanged(object sender, LoadingStateChangedEventArgs e)
  { 
    browser.LoadingStateChanged -= GetScreenShotOnLoadingStateChanged;

    System.Drawing.Bitmap screenshot = await browser.ScreenshotAsync(true);

    // Set the Task.Status of the Task instance to 'RanToCompletion'
    // and return the result to the caller
    this.TaskCompletionSource.SetResult(screenshot);
  }
}

使用示例：

public async Task CreateScreenShotAsync(ChromiumWebBrowser browserInstance, string url)
{
  var recorder = new CefSharpScreenshotRecorder();   
  System.Drawing.Bitmap screenshot = await recorder.TakeScreenshotAsync(browserInstance, url);
}

Answer 2

你真的不需要一个单独的类来保存状态。您可以使用local function（或Action<object, PaintEventArgs> 委托），如果有任何状态，编译器将为您生成一个类来保存状态。这些隐藏类称为closures。

public static Task<Bitmap> TakeScreenshotAsync(this ChromiumWebBrowser source)
{
    var tcs = new TaskCompletionSource<Bitmap>(
        TaskCreationOptions.RunContinuationsAsynchronously);
    source.Paint += ChromiumWebBrowser_Paint;
    return tcs.Task;

    void ChromiumWebBrowser_Paint(object sender, PaintEventArgs e)
    {
        source.Paint -= ChromiumWebBrowser_Paint;
        using (var temp = new Bitmap(e.Width, e.Height, 4 * e.Width,
            PixelFormat.Format32bppPArgb, e.Buffer))
        {
            tcs.SetResult(new Bitmap(temp));
        }
    }
}

TaskCreationOptions.RunContinuationsAsynchronously 选项确保任务的继续不会在 UI 线程中同步运行。当然，如果您在 WPF 应用程序的上下文中 await 没有 configureAwait(false) 的任务，则继续 然后将重新安排在 UI 线程中运行，因为 configureAwait(true) 是默认值。

作为一般规则，我会说 TaskCompletionSource 的任何用法都应指定 TaskCreationOptions.RunContinuationsAsynchronously。就个人而言，我认为该标志的语义更合适且不那么令人惊讶。 [citation]

---

免责声明：创建位图的部分代码是从another answer 复制然后修改的（参见 cmets），但未经测试。