JSON Response (Base64 Images)

Return screenshot images in JSON format with a base64 encoding.

Using the JSON format is a popular option when dealing with Rest APIs and workflow automation tools such as Microsoft Flow and Zapier.

Add Screenshot's demo on the home page is also using the JSON response to dynamically display screenshots.

Default Format

By default, requests are returned in a binary format such as png or jpeg.

JSON Base64 Example - PNG Image

The example below will take a png website screenshot and return the image in a base64 encoded JSON response. Note that the default image type is png.

// Line breaks added for readability https://api.addscreenshots.com/screenshots
?apikey=
YOUR_API_KEY
&json=true
&url=google.com

Your API key can be found on the API Keys page. Need an API Key? Sign up to get started.
For internal applications, replace YOUR_API_KEY with your own unique API Key.
For public facing websites or hotlinks, generate a signed URL.

JSON Response for a png image:

{ "image": "data:image/png;base64,iVBORw0KGgoAAA..." }


JSON Base64 Example - JPEG Image

The example below will take a jpeg website screenshot and return the image in a base64 encoded JSON response.

// Line breaks added for readability https://api.addscreenshots.com/screenshots
?apikey=
YOUR_API_KEY
&format=jpeg
&json=true

&url=google.com

Your API key can be found on the API Keys page. Need an API Key? Sign up to get started.
For internal applications, replace YOUR_API_KEY with your own unique API Key.
For public facing websites or hotlinks, generate a signed URL.

JSON Response for a jpeg image:

{ "image": "data:image/jpeg;base64,/9j/4AAQSkZJ..." }


How to display a dynamic base64 encoded image using jQuery

The following code snippet shows how to take a screenshot request using jQuery and dynamically update an image with the id "imgscreenshot".

$.ajax({
  dataType: "json",
  url: https://api.addscreenshots.com/screenshots?apikey=YOUR_API_KEY&json=true&url=google.com
})
.done(function (response) {
  $("#imgscreenshot").attr("src", response.image);
}