When creating captures such as converting a web page into a SVG, PNG, PDF or DOCX. You can execute your own custom JavaScript before the capture is taken.
We wrap your code in a function to ensure it runs independently and doesn't halt the capture process if an error occurs. So for instance if you wanted to run this code:
document.getElementById('user-name').innerText = 'New User';
Before it is executed, it will be wrapped in code that looks like this:
function(){
try
{
document.getElementById('user-name').innerText = 'New User';
}
catch (e)
{
// Errors are silently ignored
}
}
Before you start sending JavaScript to GrabzIt's API it would be a good idea to test it locally in your browser using Developer Tools. To debug the code in GrabzIt's API, you can modify an element to display a status message. For example, this code will change the background colour of the body to red if a specific element isn't found, giving you a visual cue in the final capture.
if (!document.getElementById('my-element')) {
document.body.style.backgroundColor = 'red';
}
Below are some examples of using custom JavaScript when creating captures.
//The client should be stored somewhere and reused!
GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret", client);
ImageOptions options = new ImageOptions();
options.JSCode = "document.write('hello');";
grabzIt.URLToImage("https://www.bbc.co.uk", options);
await grabzIt.SaveToAsync("images/result.jpg");
GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
ImageOptions options = new ImageOptions();
options.setJSCode("document.write('hello');");
grabzIt.URLToImage("https://www.bbc.co.uk", options);
grabzIt.SaveTo("images/result.jpg");
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.3/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.bbc.co.uk",
{"jscode":"document.write('hello');"}).Create();
</script>
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"jsCode":"document.write('hello');"};
client.url_to_image("https://www.bbc.co.uk", options);
client.save_to("images/result.jpg", function (error, id){
if (error != null){
throw error;
}
});
$grabzIt = GrabzItClient->new("Sign in to view your Application Key", "Sign in to view your Application Secret");
$options = GrabzItImageOptions->new();
$options->jsCode("document.write('hello');");
$grabzIt->URLToImage("https://www.bbc.co.uk", $options);
$grabzIt->SaveTo("images/result.jpg");
$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");
$options = new \GrabzIt\GrabzItImageOptions();
$options->setJavaScriptCode("document.write('hello');");
$grabzIt->URLToImage("https://www.bbc.co.uk", $options);
$grabzIt->SaveTo($filepath);
grabzIt = GrabzItClient.GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret")
options = GrabzItImageOptions.GrabzItImageOptions()
options.jsCode = "document.write('hello');"
grabzIt.URLToImage("https://www.bbc.co.uk", options)
grabzIt.SaveTo("images/result.jpg")
https://api.grabz.it/convert?key=Sign in to view your Application Key&format=jpg&jscode=document.write%28%27hello%27%29%3B&url=https%3A%2F%2Fwww.bbc.co.uk
grabzIt = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")
options = GrabzIt::ImageOptions.new()
options.jsCode = "document.write('hello');"
grabzItClient.url_to_image("https://www.bbc.co.uk", options)
grabzItClient.save_to("images/result.jpg")
The JavaScript will run after the page has loaded and any specified delay, or wait for, has been completed.
As the JavaScript is allowed to run for a maximum of one second before it is automatically stopped. Be careful with asynchronous operations like setTimeout and fetch. Because the script is stopped after one second, these operations may not complete before the time limit is reached.
The JavaScript is executed in a Chromium environment so any Chromium only features will be available to your script.