Screenshot and HTML Conversion Events with JavaScript

GrabzIt exposes several events that allow developers to hook into the different stages that can occur during screenshot and capture generation.

OnFinish Event

The onfinish event calls the provided JavaScript function when the screenshot is ready. To hook into the onfinish event you need to provide the JavaScript function that should be called by GrabzIt.

The JavaScript function should have a id parameter, as below. The id parameter will equal the id of the screenshot that was taken by the JavaScript call. One potential use of the id parameter could be to do something such as use AJAX to call server-side code to download the screenshot with this matching id on to your web server, so you have a record of all the screenshots generated in the client-side JavaScript.

URL to Image
HTML to Image

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

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

Another use of this function is to hide or show in page animations or activating other web page features, once the screenshot has loaded.

OnStart Event

The onstart event calls the provided JavaScript function when the screenshot has started processing. To hook into the onstart event you need to provide the JavaScript function that should be called by GrabzIt.

Just like the onfinish, the onstart JavaScript function should have a id parameter, as below. The id parameter will equal the id of the screenshot that will be taken by the JavaScript call.

URL to Image
HTML to Image

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

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

OnError Event

The onerror event is called when an error occurs. To hook into this event provide the function that should handle the event, as shown below.

The JavaScript function you specify to handle error events should have a message and code parameter as shown below. The message is a textual explanation of the error, and the code is the numerical code associated with the error.

URL to Image
HTML to Image

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.6/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"onerror": function(message, code){
        alert(message);
    }}).Create();
</script>

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