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

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Override default color of rectangle using color

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "rectangle",
          "color": "green",
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Add inner space around the rectangle using offset

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "rectangle",
          "color": "green",
          "offset": 15,
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Annotate with multiple rectangles

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen3"
          ]
      }
  ]
}'

Compute rectangle based on unrelated selectors using groupOfSelectors

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "rectangle",
          "groupOfSelectors": [
              [
                  "#s2id_autogen5"
              ],
              [
                  "#s2id_autogen3"
              ]
          ]
      }
  ]
}'

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 '{
    "url": "https://demo.baremetrics.com/stats/mrr",
    "elementSelector": [
        "section.main-graph.mrr"
    ],
    "responseType": "image",
    "deviceScaleFactor": 1,
    "margin": 10,
    "backgroundColor": "purple",
    "borderRadius": 25,
    "annotate": [
        {
            "type": "arrow",
            "selectors": [
                "#s2id_autogen5"
            ]
        }
    ]
}'

Override default color of arrow using color

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "arrow",
          "color": "green",
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Annotate a straight arrow using lineType

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "arrow",
          "lineType": "straight",
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Using offset for spacing the arrow

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "arrow",
          "offset": 15,
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Annotate with multiple arrows

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "arrow",
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen3"
          ]
      },
      {
          "type": "arrow",
          "selectors": [
              "#s2id_autogen3"
          ]
      }
  ]
}'

Compute an arrow based on unrelated selectors using groupOfSelectors

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "arrow",
          "groupOfSelectors": [
              [
                  "#s2id_autogen5"
              ],
              [
                  "#s2id_autogen3"
              ]
          ]
      },
      {
          "type": "rectangle",
          "groupOfSelectors": [
              [
                  "#s2id_autogen5"
              ],
              [
                  "#s2id_autogen3"
              ]
          ]
      }
  ]
}'

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "enumeration",
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Override default color of annotation type enumeration

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "enumeration",
          "color": "green",
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Add inner space around the enumeration using offset

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "enumeration",
          "color": "green",
          "offset": 10,
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen5"
          ]
      }
  ]
}'

Annotate with multiple annotation type including enumeration

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "enumeration",
          "color": "blue",
          "offset": 10,
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen5"
          ]
      },
      {
          "type": "enumeration",
          "color": "green",
          "offset": 10,
          "selectors": [
              "#s2id_autogen1"
          ]
      },
      {
          "type": "rectangle",
          "selectors": [
              "#s2id_autogen1"
          ]
      }
  ]
}'

Using groupOfSelectors with annotation of type enumeration

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 '{
  "url": "https://demo.baremetrics.com/stats/mrr",
  "elementSelector": [
      "section.main-graph.mrr"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "enumeration",
          "color": "green",
          "offset": 10,
          "groupOfSelectors": [
              [
                  "#s2id_autogen5"
              ],
              [
                  "#s2id_autogen1"
              ]
          ]
      },
      {
          "type": "rectangle",
          "color": "blue",
          "offset": 10,
          "groupOfSelectors": [
              [
                  "#s2id_autogen5"
              ],
              [
                  "#s2id_autogen1"
              ]
          ]
      }
  ]
}'

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 '{
  "url": "https://example.org/",
  "elementSelector": [
      "body > div"
  ],
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "yellow",
  "borderRadius": 25,
  "annotate": [
      {
          "type": "text",
          "message": "Hello World"
      }
  ]
}'

Annotate screenshot at the top of screenshot

bash

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

Override default text color

bash

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

Increase the size of the text

bash

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

Add spacing around text

bash

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

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 '{
  "deviceScaleFactor": 1,
  "elementSelector": [
      "body > div"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      },
      {
          "value": 3000,
          "type": "waitFor"
      }
  ],
  "annotate": [
      {
          "type": "watermark",
          "image": "https://app.launchbrightly.com/launchbrightly-mark-social-rounded-512px.png",
          "position": "bottom-right",
          "size": 25,
          "offset": 10,
          "opacity": 1
      }
  ],
  "responseType": "image"
}'

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 '{
  "deviceScaleFactor": 1,
  "elementSelector": [
      "body > div"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      },
      {
          "value": 3000,
          "type": "waitFor"
      }
  ],
  "annotate": [
      {
          "type": "watermark",
          "text": "Captured by Launchbrightly  ",
          "position": "bottom-left"
          "offset": 0,
          "color": "red"
      }
  ],
  "responseType": "image"
}'

modifyText 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 '{
  "deviceScaleFactor": 1,
  "elementSelector": [
      "body"
  ],
  "steps": [
      {
          "type": "navigate",
          "url": "https://example.org"
      },
      {
          "value": 3000,
          "type": "waitFor"
      }
  ],
  "annotate": [
      {
          "type": "modifyText",
          "selectors": [
              "h1",
              "xpath/html/body/div/h3"
          ],
          "value": "Hello World!"
      }
  ],
  "responseType": "image"
}'

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 '{
 "url": "http://example.org",
 "fullPage": true,
 "annotate": [
     {
         "type": "blur",
         "selectors": [
             "body > div > p:nth-child(2)"
         ],
         "intensity": 10
     }
 ],
 "deviceScaleFactor": 1,
 "responseType": "image"
}'

Blur a section using groupOfSelectors

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 '{
   "url": "http://example.org",
   "fullPage": true,
   "annotate": [
       {
           "type": "blur",
           "groupOfSelectors": [
               [
                   "body > div > p:nth-child(2)"
               ],
               [
                   "h1"
               ]
           ],
           "intensity": 10
       }
   ],
   "deviceScaleFactor": 1,
   "responseType": "image"
}'

Redact using a solid color

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 '{
 "url": "http://example.org",
 "fullPage": true,
 "annotate": [
     {
         "type": "blur",
         "selectors": [
             "body > div > p:nth-child(2)"
         ],
         "intensity": 100,
         "color": "red"
     }
 ],
 "deviceScaleFactor": 1,
 "responseType": "image"
}'

Blur a specific email using 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 ' {
     deviceScaleFactor: 1,
     steps: [
       { type: 'navigate', url: "https://api-test-fixtures.s3.us-east-1.amazonaws.com/blur.html "},
       { type: 'waitFor', value: 1000 }
     ],
     annotate: [
       {
         type: 'blur',
         intensity: 30,
         text: ['john@launchbrightly.com']
       }
     ],
     responseType: 'image'
   }'

Blur emails with a specific domain with wildcards using 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 ' {
     deviceScaleFactor: 1,
     steps: [
       { type: 'navigate', url: "https://api-test-fixtures.s3.us-east-1.amazonaws.com/blur.html" },
       { type: 'waitFor', value: 1000 }
     ],
     annotate: [
       {
         type: 'blur',
         intensity: 30,
         text: ['*@launchbrightly.com']
       }
     ],
     responseType: 'image'
   }'

Blur emails with a specific domain with regex using 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 '{
     deviceScaleFactor: 1,
     steps: [
       {
         type: 'navigate',
         url: "https://api-test-fixtures.s3.us-east-1.amazonaws.com/blur_more_input_fields.html"
       },
       {
         type: 'waitFor',
         value: 1000
       }
     ],
     annotate: [
       {
         type: 'blur',
         intensity: 90,
         text: ['/example\\.(org)$/i']
       }
     ],
     responseType: 'image'
   }'

Blur credit card details with regex using 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 '{
     deviceScaleFactor: 1,
     steps: [
       {
         type: 'navigate',
         url:"https://api-test-fixtures.s3.us-east-1.amazonaws.com/blur_more_input_fields.html"
       },
       {
         type: 'waitFor',
         value: 1000
       }
     ],
     annotate: [
       {
         type: 'blur',
         intensity: 90,
         text: ['/\b(?:\d[ -]*?){13,16}\b/g']
       }
     ],
     responseType: 'image'
   }'

Global configuration

Some properties can be set globally instead of repeating it for each annotation e.g.

Setting global configuration

json

{
  "global": {
    "annotation": {
      "color": "purple",
      "width": 3,
      "offset": 3
    }
  },
  "url": "https://example.org/",
  "elementSelector": [
    "body > div"
  ],
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "brown",
  "borderRadius": 25,
  "annotate": [
    {
      "type": "rectangle",
      "selectors": [
        "body > div > p:nth-child(2)"
      ]
    }
  ]
}

Annotate Image ​

Types of Image Annotation ​

Rectangle annotation ​

Arrow annotation ​

Enumeration annotation ​

Text annotation ​

Watermark annotation ​

modifyText annotation ​

Blur annotation ​

Global configuration ​

Annotate Image

Types of Image Annotation

Rectangle annotation

Arrow annotation

Enumeration annotation

Text annotation

Watermark annotation

modifyText annotation

Blur annotation

Global configuration