Crop Screenshot #

The screenshot endpoint allows you to crop your screenshot to preserve the most relevant part of the image. We support two ways of cropping a screenshot.

1. Crop using CSS-like properties #

The top, bottom, left, and right values allow you to specify the starting location of the crop. Image dimensions will be calculated from this starting point outward.

• top: Crop from the top of the image, down.
• bottom: Crop from the bottom of the image, up.
• left: Crop from the left of the image, right.
• right: Crop from the right of the image, left.

Example:

{
  "url": "https://example.org",
  "elementSelector": [
    "body > div"
  ],
  "responseType": "base64image",
  "crop": {
    "top": 80,
    "left": 25,
    "right": 25,
    "bottom": 70
  }
}

2. Crop using bounding box #

When it comes to cropping images, bounding boxes are a crucial tool for specifying the area of interest within an image. These bounding boxes are defined by four essential properties: x, y, width, and height. Each of these properties plays a specific role in precisely defining the region you want to crop:

• x: The x coordinate represents the horizontal position of the top-left corner of the bounding box.
• y: The y coordinate represents the vertical position of the top-left corner of the bounding box.
• width: The width property defines the horizontal dimension of the bounding box.
• height: The height property dictates the vertical dimension of the bounding box.

Example:

{
  "url": "https://example.org",
  "elementSelector": [
    "body > div"
  ],
  "responseType": "base64image",
  "crop": {
    "x": 30,
    "y": 45,
    "width": 565,
    "height": 150
  }
}