Tools to Capture and Convert the Web

GrabzIt's Free JavaScript Screenshot and HTML Conversion API

JavaScript Screenshot API
The diagnostics panel can help you debug your code!

Using the GrabzIt JavaScript Screenshot 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!

Our servers will cache a capture for the time determined by your package. If you make a call to GrabzIt's JavaScript API using the same parameters as the previously cached screenshot. The system will return the cached screenshot instead to prevent using your capture allowance. You can disable this behaviour by using the cache parameter.

Getting Started

Follow these steps to start using the JavaScript API:

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

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 in. 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 capture screenshots of.

<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. The image will automatically appear at the top of the page, without the need to reload the webpage. Even thought the browser generates this image you can still use these techniques to save captures on your own server.

To use GrabzIt as an ES6 module instead you can use this technique. Other than how you include the JavaScript in your website it will work in exactly the same way as detailed here.

Customizing your screenshots

You always need the Application Key and the URL or HTML parameters, however all other parameters are optional. To use optional parameters, add the parameter and its value as a JSON dictionary item.

For instance, to take a PNG screenshot with a width of 400px, a height of 400px and a 10 second wait, you would do the following.

<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 can access a web page's HTML easily. This makes it ideal for capturing dynamic webpage content. As well as accessing 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 specify the desired format type, and the system will automatically create it. For instance in the below examples we are creating DOCX and PDF documents from URL's and HTML respectively. The users' browser automatically downloads these files.

<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>

Note that you can use the download parameter to automatically download any type of capture e.g. DOCX, PDF, PNG, JPG or CSV.

Adding Screenshots to Elements

The AddTo method below accepts the id of a DOM element within the web page to add the image or PDF capture to. In the example below, the code will add the screenshot to the insertCode div.

Finally pass any required parameters as a JSON dictionary to the ConvertURL or ConvertHTML methods. In the example below, we set the delay to 1000ms and the format to PNG. The options parameter is optional, so if you do not require any additional options do not set it.

<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 URL

The DataURI method below accepts a callback function. This function will receive a base64 data URL of the rendered screenshot or capture. Allowing your JavaScript application even more control over the capture.

<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

Choose one of the following three methods to indicate what you want to convert.

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

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