Selecting part of a page

Learn how to select/crop a specific part of an image with the selector param.

Selector

The selector param allows you to pass a CSS selector to the API. This will auto crop the image to the height and width of the selected html element.

This works for both HTML and URL images.

Example

With the following HTML, we only want to screenshot the inner content area. The rest should be cropped out.

<div class="margin">
  <div class="content">
    This is an example
  </div>
</div>

To do this, we would set selector to .content and the API will crop to the inner div.

Use a CSS selector to crop an image

Selector examples

CSS selectors can get quite complicated, here are a couple simple examples.

Class name selector:

<div class="example"></div>

A CSS selector for a class can be specified with a period before the class name. Here we’d use .example.

Note: when selecting a class, the API will use the first instance that matches on the page since css classes are not unique.

ID selector:

<div id="example"></div>

When selecting and ID, we add a hash before the id. Here we’d use #example.

More examples

For a full guide to CSS selectors with examples, please take a look at this W3 schools article on CSS selectors.