How to take a screenshot of your user’s web page in JavaScript

Have you ever wanted to to take a screenshot of a users web page? Perhaps to enable easier bug fixing or user interface improvements? Well you can with GrabzIt’s JavaScript API.

To capture a users page you must use the ConvertPage method. This sends the content of the users page to us to be converted into a image, PDF, DOCX or anything else we support. It is important to remember that any resources such as CSS or or images can’t be loaded unless in the screenshot unless they are available publicly. However this is usually the case.

The simple example below shows how easy it is to screenshot a users web page using GrabzIt’s library. Just place the code at the bottom of the page you want to capture.

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

Note that you can pass any parameters allows by the JavaScript API to the ConvertPage method, to further customize your screenshot. For instance in the below example we make the screenshot the same width as the users web page, while capturing its full height.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({
   "bwidth":document.documentElement.clientWidth,
   "bheight": -1, 
   "height": -1,
   "width": -1
}).Create();
</script>

The above examples however are limited as you will need to trigger the capturing of a web page on a event of some sort, rather than only capturing the page when the web page is loaded. For instance two potential alternatives would be to either capture the web page on a button click or at regular intervals with a timer.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
setTimeout(function(){
   GrabzIt("Sign in to view your Application Key").ConvertPage({
      "bwidth":document.documentElement.clientWidth,
      "bheight": -1, 
      "height": -1,
      "width": -1
   }).CreateInvisible();
}, 30000);
</script>

In the example above we create automatically screenshot the users web page every 30 seconds. But rather than adding the screenshot to the users web page or downloading it, as the Create method used in the previous examples would do, depending on the format. The CreateInvisible method is used, which will not return a result to the user.

You can then save the JavaScript screenshot using one of the following methods. The export parameter to export the result to Amazon, Dropbox, FTP or more. Or you can use the finish event to call a web service to save the result, or the DataURI method to post the result to a web service.

Obviously it goes without saying that you will probably need to inform your users you are doing this.

You can start screenshotting the current web page for free, by creating an account and copying the above code into a web page you want to capture. Remember that to make sure other people don’t use your account you must authorize your domain before it will work on your website.