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.
Follow these steps to start using the JavaScript API:
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.
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.
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.
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.
<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>
Specifying the download parameter above. Causes the users' browser to automatically download the file. Note that you can use the download parameter to automatically download any type of capture e.g. DOCX, PDF, PNG, JPG or CSV.
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>
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>
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.