using OffScreen in order to take some screenshots

[yuacui]

Hello

I am using CefSharp.OffScreen.Example in order to take some screenshots.
What should I do to get a screenshot of the specified location? At present, only full screen shots can be obtained

[amaitland]

Personally I'd be looking at https://github.com/hardkoded/puppeteer-sharp which should have better support for this use case.

[campersau]

You can try out the dev tools CaptureScreenshotAsync where you can pass in a custom viewport/clip:

using (var devToolsClient = browser.GetDevToolsClient())
{
    var viewport = new CefSharp.DevTools.Page.Viewport();
    viewport.Width = 100;
    viewport.Height = 100;
    viewport.X = 100;
    viewport.Y = 100;
    viewport.Scale = 1;

    var response = await devToolsClient.Page.CaptureScreenshotAsync(clip: viewport);

    var image = Image.FromStream(new MemoryStream(response.Data));
}

[yuacui]

i'will try ， I really appreciate all your help！

[amaitland]

@campersau Last time I tried clip it wasn't working correctly. Does this only work if width/height less than the viewpoint size?

[campersau]

@amaitland Yes, when using the offscreen browser you need to make sure that the clip X + Width / Y + Height does not exceed the browser Size. Also the clip Scale should always be set to 1 and the browsers DeviceScalingFactor should be used instead.
So to take screenshots of things beyond the viewport you either scroll to it or adjust the browsers Size. (Note: changing the Size might also change how the page looks because it can trigger CSS media queries and layouts.) Which makes the dev tools CaptureScreenshotAsync effectively just a helper for cropping the browsers ScreenshotAsync.

Otherwise you get something similar to https://bitbucket.org/chromiumembedded/cef/issues/3103/offscreen-capture-screenshot-with-devtools because the cef offscreen browser does not implement SetSize and always deffers to the IRenderHandler.GetViewRect (browser.Size) and GetViewRect.GetScreenInfo (browser.DeviceScalingFactor).

So if you hit those restrictions it might be better to use something else as suggested above.

---

I also just discovered this new method:

CefSharp/CefSharp.OffScreen/ChromiumWebBrowser.cs

Line 538 in b72d413

public async Task<byte[]> CaptureScreenshotAsync(CaptureScreenshotFormat? format = null, int? quality = null, Viewport viewport = null)

which tries to take care of these restrictions but it looks like it currently does not support X, Y and Scale. (Scale does not work as the check for width / height needs to use the scaled sizes: * deviceScaleFactor). Also it sets the Size to the viewport dimensions which isn't what you might want as this can affect the layout of the page as mentioned above and often includes scrollbars when the viewport is relatively small. (Seems like cef does not support hide-scrollbars?)

[amaitland]

@campersau Thanks for the additional information. I had only tested with full page screenshots and had problems. My assumptions are based on that use case.

which tries to take care of these restrictions but it looks like it currently does not support X, Y and Scale

Scale should be handled. X and Y are not supported currently.

Also it sets the Size to the viewport dimensions which isn't what you might want as this can affect the layout of the page as mentioned above and often includes scrollbars when the viewport is relatively small.

Based on your comments CaptureScreenshotAsync could be updated to only resize if nessicary.