Take screenshot of an element

[buremba]

The screenshot() method returns the full-page screenshot, is there any way to get the screenshot of a DIV or any other element?

[ernsheong]

Is it really "full-page", or just viewport screenshot?

[buremba]

Oh, sorry, it's the viewport. It's possible to calculate the viewport of the DIV, create a screenshot with that viewport so that the result covers the DIV and then crop the screenshot but most of the screenshot tools support this feature and it would be great if this library can also support it.

[ernsheong]

This is basically a proxy to Chrome itself, so if Chrome doesn't have it, you're out of luck

[buremba]

It's possible to accomplish this with a bit of post-processing. If the aim of this library is to provide a proxy to Chrome headless, then you're right but if the aim is to provide a high-level library (it looks to be like that) on top of Chrome, this would be a good feature.

[stevenvachon]

Nightmare has a clip argument. This library is still very immature.

[hbakhtiyor]

Page.captureScreenshot protocol method has clip parameter which you can use it.

I did it in my API, here's the example of the capturing only DOM node.
https://api.letsvalidate.com/v1/thumbs?url=stackoverflow.com&selector=%23question-mini-list

Here's how I did it.

// ...

const {root: {nodeId: documentNodeId}} = await DOM.getDocument();
let nodeId;

try {
  const node = await DOM.querySelector({
    selector: options.selector,
    nodeId: documentNodeId,
  });

  nodeId = node.nodeId;
} catch(err) {
  console.error('Error while DOM querying', {err});
}

if (nodeId) {
  const {model} = await DOM.getBoxModel({nodeId});

  clip = {
    x: model.content[0],
    y: model.content[1],
    width: model.width,
    height: model.height,
    scale: 1
  };
}

// ...

const {data} = await Page.captureScreenshot({clip});

[stevenvachon]

Verbose. I'll stick with Nightmare.

[buremba]

@hbakhtiyor it's a hosted service, we would like to host the API in our own servers / AWS account because of security considerations. We attach the private cookie information to the session in order to get screenshots of user dashboards. That's why I'm interested in this library.

[joelgriffith]

Navalia has had this for a while as well: https://joelgriffith.github.io/navalia/Chrome/screenshot/

[schickling]

That's a great idea @buremba! We should definitely make this easier in the future! Thanks for bringing this up.

How would you like the API to look like?

@stevenvachon: Please note that unlike NightmareJS which has been around for many years and therefore seen a lot of API iterations and improvements, Chromeless is still pretty new. So if you're missing a feature, please open an issue (or even better: create a PR). I think this would be more productive instead of these kinds of comments. 🙏

[elisherer]

Implemented in #137

[buremba]

Thanks!