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
• Arrow
• Enumeration
• Text
• Watermark
• ModifyText
• Blur
• Callout

Rectangle annotation

Draw a rectangle on an image.

Annotate with a rectangle using selectors

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.

Annotate with an arrow using selectors

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.

Annotate with an enumeration using selectors

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.

Annotate with custom text message.

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.

Watermark with an image

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

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.

See Example

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.

Blur a section with no color (default) using selectors

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.

Callout in green with a specific thickness

{
 "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\
     }\
 ]
}