Capturing a page as rendered on the screen

[PolesApart]

I was attempting to implement some features by using cef3 print to pdf support, and although I went ahead and it worked, that ended up not being quite like my clients would like: I'd need to capture the page exactly as cef3 is rendering it, but also including the portions outside of the view port, i.e. whaever I would get by manually capturing the viewport, pressing page-down, merging the previous image's bottom with the now visible image's top (preferably pixel-exact), and repeating the process until I reach the end of the page.

Any thoughts on how I could accomplish that?

[magreenblatt]

What kind of pages do you need to capture? Will there be floating elements that always position themselves at the same location in the viewport? If so, how do you propose to handle them?

[PolesApart]

My app ressembles a browser, i.e. it has a top bar with user interface and the rest of the application space is dedicated to cef3's viewport. I don't render anything on top of the viewport ( I'm still unsure how I'll handle popups, but it's unimportant for now). So I'd need to capture just the entire viewport, but also the "invisible" parts of it, exactly as the user sees on it when navigating (or very very close), preferably losslessly (i.e. if I had to do it via offscreen rendering [is there other way?] I'd like something finer than a blurred texture).

Is it feasible?

[magreenblatt]

When you scroll a page like facebook.com the bar always stays fixed at the top. How will you handle that?

[PolesApart]

Luckily, I could live with that, i.e. it's the "ok" scenario. As long as information isn't lost, it's ok for it to be repeated, even if it gets ugly sometimes (most times?), but ideally the viewport scrolling would be as precise as possible, i.e. the scroll amount should't be too much (as to scroll over undisplayed information) or too little (as to repeat information unnecessarily), or, putting in other words, in sites that *don't* have top banners as the one you suggest, the alignment should be pixel-exact or very close. Or to put in yet another words, it shouldn't mess with the content even more than it already is.

The ideal scenario would be to have a virtual viewport that is more or less in width than a screen, but that the height is so large that the content would be rendered with this kind of "header" just on top of it (or seldomly, as the viewport must have some finity) and everything else would be a huge continuation, i.e. an improved (from my application point of view) version of what I'd get with printing, but keeping WISIWYG rule, except that images would be breaked by the screen height or some other arbitrary mark, and another image would start on the next pixel line.

But I'm settling for way less: If I can automate what the user would manually get by printscreen and scrolling (as long as the scroll is not too dumb), that suffices.

[magreenblatt]

You should be able to do the capture + scrolling using a combination of off-screen rendering and JavaScript. With off-screen rendering you can choose an arbitrary viewport (browser) size, however there will be resource constraints on what can successfully be rendered.

[PolesApart]

I'll try make the viewport only twice as tall as the screen. It should suffice.
Do you know if everything normally used renders to offscreen buffers, i.e. video/flash/plugins ?

[magreenblatt]

I'll try make the viewport only twice as tall as the screen. It should suffice.
Do you know if everything normally used renders to offscreen buffers, i.e. video/flash/plugins ?

If you're using a current version of CEF (2171+) then everything excluding windowed plugins should render correctly.