Wait asynchronously for a synchronous event/ operation with Task while taking a screenshot from the web browser/ web page using CefSharp

Question

What I'm trying to do is the following:

I've got a CefSharp ChromiumWebBrowser (WPF control), and I would like to take a screenshot of the webpage in that browser. The on-screen ChromiumWebBrowser has no method for taking screenshots. But I can obtain the rendering by attaching an event handler to the OnPaint event of the browser. This way I get a Bitmap that is the screenshot. The process is based on this answer: https://stackoverflow.com/a/54236602/2190492

Now I'm creating a class CefSharpScreenshotRecorder that should be responsible for taking screenshots. It should accept a browser instance, attaches an event handler to the OnPaint event, and gets the bitmap. All the state of this process should be encapsulated in that CefSharpScreenshotRecorder class. I would like to be able to use my class asynchronously. Since we have to wait until the OnPaint event is triggered. When that event is triggered (and event handler called), a Bitmap is available in the event handler. Then this Bitmap should be the result of the asynchronous method that was originally called (like CefSharpScreenshotRecorder.TakeScreenshot(...cefBrowserInstance...). Everything must happen without blocking/lagging the UI of course.

I'm not very familiar with asynchronous programming in C#. The problem I have is that I can't find a way to make an awaitable method, that only returns on behalf of the OnPaint event handler when it is called. I don't even know if any code features exist to create this logic.

Answer 1

This can be achieved using TaskCompletionSource. This way you can wrap synchronous (e.g. event-driven) code into an asynchronous method without using 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();
    }
  }
}

Usage example (working):

MainWindow.xaml

<Window>
  <StackPanel>
    <Button Click="TakeScreenshot_OnClick" Height="50" Content="Take Screenshot"/>
    <ChromiumWebBrowser x:Name="ChromiumWebBrowser"
                        Width="500"
                        Height="500"
                        Address="https://stackoverflow.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);
}

---

Edit

In case you are just interested in taking a snapshot from a web page then take a look at CefSharp.OffScreen (available via the NuGet package manager). The ChromiumWebBrowser class exposes a ScreenshotAsync method that returns a ready to use System.Drawing.Bitmap. Here is an example from the project repository on GitHub.

Example:

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

Usage example:

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

Answer 2

You don't really need a separate class to hold the state. You could use a local function (or an Action<object, PaintEventArgs> delegate) and the compiler will generate a class for you to hold the state, if there is any state. These hidden classes are known as 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));
        }
    }
}

The option TaskCreationOptions.RunContinuationsAsynchronously ensures that the continuation of the task will not run synchronously in the UI thread. Of course if you await the task without configureAwait(false) in the context of a WPF application, the continuation will then be rescheduled to run in the UI thread, since configureAwait(true) is the default.

As a general rule, I would say any usage of TaskCompletionSource should specify TaskCreationOptions.RunContinuationsAsynchronously. Personally, I think the semantics are more appropriate and less surprising with that flag. [citation]

---

Disclaimer: the part of the code that creates the bitmap is copied from another answer and then modified (see comments), but has not been tested.