Take Website Screenshots with JavaScript

The diagnostics panel can help you debug your code!

Using the GrabzIt JavaScript API is the simplest way of putting image, DOCX or PDF screenshots, as well as video to animated GIF conversions and more into your website. Requiring just the GrabzIt JavaScript library, a line of JavaScript code and some GrabzIt magic!

By default once a capture has been created it will remain cached on our servers for the time determined by your package. Then if a call to GrabzIt's JavaScript API is made using the same parameters as a previously cached screenshot that will be returned instead, to prevent unnecessarily using your screenshot allowance. This behaviour can be disabled by using the cache parameter.

Getting Started

To get started with the Javascript API follow these steps:

Get your free application key.
Download the free JavaScript Library and try out the demo app.
Find out the basics about how GrabzIt's JavaScript API works by reading the below overview.

In order to prevent other people just copying your JavaScript code and stealing all your GrabzIt account resources, you must authorize what domains can use your Application Key.

As you currently have no authorized domains this JavaScript API will not work for you! Please add your domain!

The Simplest Example

To get started download the GrabzIt JavaScript library and include the grabzit.min.js library in the web page you want the capture to appear or include a reference to the CDN version of the grabzit.min.js library as shown below. Then include the below code to add a screenshot to the body tag of your web page. You will need to replace the APPLICATION KEY with your Application Key and replace https://www.tesla.com with the website you want to take a screenshot of.

URL to Image
HTML to Image

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

Then simply wait a short while and the image will automatically appear at the top of the page, without the need to reload the webpage. Even though this image is generated in the browser you can still use these techniques to save captures on your own server if you wish.

If you want to use GrabzIt as an ES6 module instead you can use this technique, other than how GrabzIt is included in your JavaScript it will work in exactly the same way as detailed here.

Customizing your screenshots

While the Application Key and the URL or HTML parameters are required, all other parameters are optional. A parameter is added by appending the parameter with its value as a JSON dictionary in the following format for every optional parameter you require.

For instance if you wanted to have a screenshot with a width of 400px and a height of 400px, in a PNG format and wanted to wait 10 seconds before the screenshot was taken you would do the following.

URL to Image
HTML to Image

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

As the JavaScript API has easy access to a web page's HTML it is also ideal for capturing dynamic webpage content or content behind a login.

Creating PDF's and more

To create another type of capture such as a PDF, DOCX, CSV, JSON or Excel Spreadsheet just specifiy the desired format and it will be automatically be created. For instance in the below examples we are creating DOCX and PDF documents from URL's and HTML respectively, these are then automatically downloaded to the users browser.

URL to PDF
HTML to PDF
URL to DOCX
HTML to DOCX

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

It is important to remember that this download parameter can be used to automatically download any type of capture, such as a DOCX, PDF, PNG, JPG or CSV.

Adding Screenshots to Elements

The AddTo method below accepts the id of a element or a DOM element as the location within the HTML document to add the image or PDF capture to. In the below example the screenshot will be added to the insertCode div.

Finally pass any required parameters as a JSON dictionary to the ConvertURL or ConvertHTML methods. In the example below the delay has been set to 1000ms and the format to PNG. However if you do not require any other additional options you do not need to specify this parameter at all.

URL to Image
HTML to Image

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

Converting Captures to a data URI

The DataURI method below accepts a callback function, this function will then be passed the base64 data URI of the screenshot or capture once it has been rendered allowing your JavaScript application even more control over the capture.

URL to Image
HTML to Image

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

GrabzIt Methods

To get started you must choose one of the following three methods to indicate what you want to convert.

ConvertURL([url to capture], [options]) - converts a URL, by default a JPG screenshot. The JSON dictionary containing the parameters is optional.
ConvertHTML([html to convert], [options]) - converts HTML, by default into a JPG image. The JSON dictionary containing the parameters is optional.
ConvertPage([options]) - captures the user's current page, by default into a JPG image. The JSON dictionary containing the parameters is optional.

Then choose one or more of these methods, to specify how you want the capture to be created.

UseSSL() - forcibly make requests using SSL.
Encrypt() - automatically encrypt a capture with a cryptographically secure key.
AddPostVariable(name, value) - defines a HTTP Post parameter and optionally value, this method can be called multiple times to add multiple parameters. Using this method will force GrabzIt to perform a HTTP post.
AddTemplateVariable(name, value) - defines a custom template parameter and value, this method can be called multiple times to add multiple parameters.
AddTo([element | element id]) - inserts a the capture into the specified element.
Create() - inserts the capture into the beginning of the body tag, or if that is not present the root node of the HTML document.
CreateInvisible() - the capture is created but not shown on the web page.
DataURI([callback function], [decrypt]) - returns the base64 data URI of the capture in the single parameter of the callback function. If decrypt parameter is true it will automatically decrypt any encrypted captures.

This JavaScript code library is completely open source! If you want to view or improve the source code you can find it on GitHub.