GrabzIt
Tools to Capture and Convert the Web

Take Website Screenshots with JavaScriptJavaScript API

The diagnostics panel can help you debug your code!
Add Web Captures to a Webpage

Using the GrabzIt JavaScript API is the simplest way of putting image 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.

Set up your Account

To get started you need to get your free Application Key, then 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.

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, then include the code below to add the screenshot to the body tag. You will need to replace the APPLICATION KEY with your Application Key and replace http://www.google.com with the website you want to take a screenshot of.

<script src="grabzit.min.js"></script>
<script>
GrabzIt("APPLICATION KEY").ConvertURL("http://www.google.com").Create();
</script>
<script src="grabzit.min.js"></script>
<script>
GrabzIt("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 bottom of the page, without you needing to reload the page.

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.

<script src="grabzit.min.js"></script>
<script>
GrabzIt("APPLICATION KEY").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>
<script src="grabzit.min.js"></script>
<script>
GrabzIt("APPLICATION KEY").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

Creating PDF's and more

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

<script src="grabzit.min.js"></script>
<script>
GrabzIt("APPLICATION KEY").ConvertURL("http://www.google.com", 
{"format": "pdf"}).Create();
</script>
<script src="grabzit.min.js"></script>
<script>
GrabzIt("APPLICATION KEY").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf"}).Create();
</script>

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 resulting screenshot or 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.

<html>
<head>
<script type="text/javascript" src="grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("APPLICATION KEY").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("APPLICATION KEY").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

GrabzIt Methods

The GrabzIt JavaScript library provides following four methods.

  • 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.
  • AddTo([element | element id]) - inserts a the capture into the specified element.
  • Create() - inserts a the capture into the end of the body tag, or if that is not present the root node of the HTML document.

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

Try all our premium features for free with a 7 day free trial. Then from $5.99 a month, unless cancelled.
  • More Captures
  • More Features
  • More API's
  • Bigger Scrapes
  • Bigger Screenshots
  • Bigger Everything
Start Free Trial