# Annotate Image

When putting together a support article that includes images, annotating those images with text, shapes, arrows etc. to call out specific parts of the image is a common use case that allows you can speak to specific parts of a bigger context.

## Types of Image Annotation

We currently support the following types of annotation:

- [Rectangle](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#rectangle-annotation)
- [Arrow](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#arrow-annotation)
- [Enumeration](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#enumeration-annotation)
- [Text](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#text-annotation)
- [Watermark](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#watermark-annotation)
- [ModifyText](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#modifytext-annotation)
- [Blur](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#blur-annotation)
- [Callout](https://docs.launchbrightly.com/product-screenshots-api/annotate-image#callout-annotation)

## Rectangle annotation

Draw a rectangle on an image.

| Option | Default value | Description |
| --- | --- | --- |
| offset | 10 | Add space around the element (think CSS padding) e.g 10 |
| color | #dc2626 | The border color of the rectangle e.g green, #800080 |
| width | 4 | The border width of the rectangle e.g 4 |
| selectors | - | An array of selector types (CSS/ARIA/XPath) |
| groupOfSelectors | - | Annotate a group of selectors. |

Annotate with a rectangle using `selectors`

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: XXX' \
--header 'Accept: image/png' \
--header 'Cache-Control: no-store' \
--header 'Content-Type: application/json' \
--data '{\n  "url": "https://demo.baremetrics.com/stats/mrr",\n  "elementSelector": [\
      "section.main-graph.mrr"\
  ],\n  "responseType": "image",\n  "deviceScaleFactor": 1,\n  "margin": 10,\n  "backgroundColor": "purple",\n  "borderRadius": 25,\n  "annotate": [\
      {\
          "type": "rectangle",\
          "selectors": [\
              "#s2id_autogen5"\
          ]\
      }\
  ]\n}'
```

## Arrow annotation

Draw an arrow on an image.

| Option | Default value | Description |
| --- | --- | --- |
| offset | 10 | Add space around the element (think CSS padding) e.g 10 |
| color | #dc2626 | The border color of the arrow e.g green, #800080 |
| width | 4 | The border width of the arrow e.g 4 |
| selectors | - | An array of selector types (CSS/ARIA/XPath) |
| groupOfSelectors | - | Annotate a group of selectors. |
| lineType | curved | Possible values: curved or straight. |

Annotate with an arrow using `selectors`

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: XXX' \
--header 'Accept: image/png' \
--header 'Cache-Control: no-store' \
--header 'Content-Type: application/json' \
--data '{\n    "url": "https://demo.baremetrics.com/stats/mrr",\n    "elementSelector": [\
        "section.main-graph.mrr"\
    ],\n    "responseType": "image",\n    "deviceScaleFactor": 1,\n    "margin": 10,\n    "backgroundColor": "purple",\n    "borderRadius": 25,\n    "annotate": [\
        {\
            "type": "arrow",\
            "selectors": [\
                "#s2id_autogen5"\
            ]\
        }\
    ]\n}'
```

## Enumeration annotation

Draw numbers on an image.

| Option | Default value | Description |
| --- | --- | --- |
| offset | 10 | Add space around the element (think CSS padding) e.g 10 |
| color | #dc2626 | The border color of the rectangle e.g green, #800080 |
| width | 4 | The border width of the rectangle e.g 4 |
| selectors | - | An array of selector types (CSS/ARIA/XPath) |
| size | 20 | The size in px of the text |
| groupOfSelectors | - | Annotate a group of selectors. |

Annotate with an enumeration using `selectors`

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: XXX' \
--header 'Accept: image/png' \
--header 'Cache-Control: no-store' \
--header 'Content-Type: application/json' \
--data '{\n  "url": "https://demo.baremetrics.com/stats/mrr",\n  "elementSelector": [\
      "section.main-graph.mrr"\
  ],\n  "responseType": "image",\n  "deviceScaleFactor": 1,\n  "margin": 10,\n  "backgroundColor": "purple",\n  "borderRadius": 25,\n  "annotate": [\
      {\
          "type": "enumeration",\
          "selectors": [\
              "#s2id_autogen5"\
          ]\
      },\
      {\
          "type": "rectangle",\
          "selectors": [\
              "#s2id_autogen5"\
          ]\
      }\
  ]\n}'
```

## Text annotation

Add a text on an image.

| Option | Default value | Description |
| --- | --- | --- |
| offset | 10 | Add space around the element (think CSS padding) e.g 10 |
| color | #dc2626 | The border color of the rectangle e.g green, #800080 |
| message | "" | The message to be displayed. |
| position | bottom | Text placement. Possible values: bottom, top |
| size | 20 | The size in px of the text |

Annotate with custom text message.

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: your-api-key' \
--header 'Content-Type: application/json' \
--data '{\n  "url": "https://example.org/",\n  "elementSelector": [\
      "body > div"\
  ],\n  "responseType": "image",\n  "deviceScaleFactor": 1,\n  "margin": 10,\n  "backgroundColor": "yellow",\n  "borderRadius": 25,\n  "annotate": [\
      {\
          "type": "text",\
          "message": "Hello World"\
      }\
  ]\n}'
```

## Watermark annotation

Draw a watermark on an image.

| Option | Default value | Description |
| --- | --- | --- |
| offset | 10 | Add space around the element (think CSS padding) e.g 10 |
| color | #dc2626 | The border color of the rectangle e.g green, #800080 |
| opacity | 0.3 | Tweak the opacity of the image |
| size | 20 | The size in px of the text |
| image | undefined | Specify a URL of an image to be used as watermark |
| text | undefined | Specify a text to be used as watermark |
| position | bottom-right | Where to place the watermark: `top-left` |

Watermark with an image

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: XXX' \
--header 'Accept: image/png' \
--header 'Cache-Control: no-store' \
--header 'Content-Type: application/json' \
--data '{\n  "deviceScaleFactor": 1,\n  "elementSelector": [\
      "body > div"\
  ],\n  "steps": [\
      {\
          "type": "navigate",\
          "url": "https://example.org"\
      },\
      {\
          "value": 3000,\
          "type": "waitFor"\
      }\
  ],\n  "annotate": [\
      {\
          "type": "watermark",\
          "image": "https://app.launchbrightly.com/launchbrightly-mark-social-rounded-512px.png",\
          "position": "bottom-right",\
          "size": 25,\
          "offset": 10,\
          "opacity": 1\
      }\
  ],\n  "responseType": "image"\n}'
```

Watermark with a text

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: XXX' \
--header 'Accept: image/png' \
--header 'Cache-Control: no-store' \
--header 'Content-Type: application/json' \
--data '{\n  "deviceScaleFactor": 1,\n  "elementSelector": [\
      "body > div"\
  ],\n  "steps": [\
      {\
          "type": "navigate",\
          "url": "https://example.org"\
      },\
      {\
          "value": 3000,\
          "type": "waitFor"\
      }\
  ],\n  "annotate": [\
      {\
          "type": "watermark",\
          "text": "Captured by Launchbrightly  ",\
          "position": "bottom-left",\
          "offset": 0,\
          "color": "red"\
      }\
  ],\n  "responseType": "image"\n}'
```

## Modify text annotation

Modify the text webpage.

| Option | Default value | Description |
| --- | --- | --- |
| selectors | - | An array of selector types (CSS/ARIA/XPath) |
| groupOfSelectors | - | Annotate a group of selectors. |
| value | - | The new text to replace with. |

See Example

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: XXX' \
--header 'Accept: image/png' \
--header 'Cache-Control: no-store' \
--header 'Content-Type: application/json' \
--data '{\n  "deviceScaleFactor": 1,\n  "elementSelector": [\
      "body"\
  ],\n  "steps": [\
      {\
          "type": "navigate",\
          "url": "https://example.org"\
      },\
      {\
          "value": 3000,\
          "type": "waitFor"\
      }\
  ],\n  "annotate": [\
      {\
          "type": "modifyText",\
          "selectors": [\
              "h1",\
              "xpath/html/body/div/h3"\
          ],\
          "value": "Hello World!"\
      }\
  ],\n  "responseType": "image"\n}'
```

## Blur annotation

Blur a section on the screenshot.

| Option | Default value | Description |
| --- | --- | --- |
| selectors | - | An array of selector types (CSS/ARIA/XPath) |
| groupOfSelectors | - | Annotate a group of selectors. |
| text | - | An Array of string to replace on the page before capturing a screenshot |
| intensity | - | The intensity of the blur from 0-100 |
| color | - | Use a solid color for the blur |

Blur a section with no color (default) using `selectors`

```bash
curl --location 'https://api.launchbrightly.com/screenshot' \
--header 'x-api-key: XXX' \
--header 'Accept: image/png' \
--header 'Cache-Control: no-store' \
--header 'Content-Type: application/json' \
--data '{\n "url": "http://example.org",\n "fullPage": true,\n "annotate": [\
     {\
         "type": "blur",\
         "selectors": [\
             "body > div > p:nth-child(2)"\
         ],\
         "intensity": 10\
     }\
 ],\n "deviceScaleFactor": 1,\n "responseType": "image"\n}'
```

Callout annotation

Callout a section on the screenshot.

| Option | Default value | Description |
| --- | --- | --- |
| selectors | - | An array of selector types (CSS/ARIA/XPath) |
| groupOfSelectors | - | Annotate a group of selectors. |
| message | - | The text in the callout |
| lineType | curved | curved or straight |
| color | red | Use a solid color for the callout |
| width | 4 | The thickness of the arrow connecting the callout |
| offset | 10 | Add space around the element (think CSS padding) e.g 10 |

Callout in green with a specific thickness

```json
{
 "width": 1536,
 "height": 864,
 "headless": true,
 "deviceScaleFactor": 1,
 "responseType": "image",
 "steps": [\
     {\
         "type": "navigate",\
         "url": "http://example.org"\
     },\
     {\
         "type": "waitFor",\
         "value": 3000\
     }\
 ],
 "annotate": [\
     {\
         "type": "callout",\
         "selectors": [\
             "a"\
         ],\
         "message": "Hello Mars",\
         "width": 1\
     }\
 ]
}
```