GrabzIt exposes several events that allow developers to hook into the different stages that can occur during screenshot and capture generation.
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.
onfinish
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.
id
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.0/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com", {"onfinish": function(id){ alert(id); }}).Create(); </script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.0/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.
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.
onstart
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.
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.0/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com", {"onstart": function(id){ alert(id); }}).Create(); </script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.0/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>
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.
onerror
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.
message
code
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.0/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com", {"onerror": function(message, code){ alert(message); }}).Create(); </script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.0/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>