Selecting part of a page
Learn how to select/crop a specific part of an image with the selector param.
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.
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
.content and the API will crop to the inner div.
CSS selectors can get quite complicated, here are a couple simple examples.
Class name selector:
A CSS selector for a
class can be specified with a period before the class name. Here we’d use
Note: when selecting a class, the API will use the first instance that matches on the page since css classes are not unique.
When selecting and ID, we add a hash before the id. Here we’d use
For a full guide to CSS selectors with examples, please take a look at this W3 schools article on CSS selectors.