Create perfect image screenshots of websites by using the following features of GrabzIt's Node.js API. However before you start remember that after calling the url_to_image, html_to_image or file_to_image methods the save or save_to method must be called to take the screenshot.
Basic Options
Just one parameter is required in order to take a screenshot of a web page or convert HTML into a image as shown in the following example.
client.url_to_image("https://www.tesla.com");
//Then call the save or save_to method
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>");
//Then call the save or save_to method
client.file_to_image("example.html");
//Then call the save or save_to method
Image Screenshot Formats
GrabzIt's Node.js API can take image screenshots in several formats, including JPG, PNG, WEBP, BMP (8 bit, 16 bit, 24 bit or 32 bit) and TIFF. The default format for image screenshots is JPG. However the quality of a JPG image may not be good enough for some applications in these circumstances the PNG format is recommended for image screenshots as it gives a good balance between quality and file size. The below example shows an image screenshot being taken using the PNG format.
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"format":"png"};
client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"format":"png"};
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"format":"png"};
client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.png", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
Browser Size
The browser size refers to the size of the browser window that will be used when capturing the screenshot in most cases this does not need to be set as the default browser size will be sufficent for all most all tasks. However if you do want to set the browser width and height an example is shown below.
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"browserWidth":1366, "browserHeight":768};
client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"browserWidth":1366, "browserHeight":768};
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"browserWidth":1366, "browserHeight":768};
client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
Change Image Size
Changing the size of an image is easy, doing it without distorting the image is a bit harder. To make the whole process simpler we recommend you use this simple image dimension calculator.
If you want to increase the image width and height to a size larger than the browser width and height, which by default is 1366 by 728 pixels, the browser width and height must also be increased to match.
Custom Identifier
You can pass a custom identifier to the image methods as shown below, this value is then returned to your GrabzIt Node.js handler. For instance this custom identifier could be a database identifier, allowing a screenshot to be associated with a particular database record.
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"customId":123456};
client.url_to_image("https://www.tesla.com", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"customId":123456};
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"customId":123456};
client.file_to_image("example.html", options);
//Then call the save method
client.save("http://www.example.com/handler", function (error, id){
if (error != null){
throw error;
}
});
Full Length Screenshot
GrabzIt allows you to take a full length screenshot of an entire web page to do this you need to pass a -1 to the browserHeight property. To ensure the image matches the size of the browser this pass a -1 to the height and width properties.
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"browserHeight":-1,"width":-1, "height":-1};
client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"browserHeight":-1,"width":-1, "height":-1};
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"browserHeight":-1,"width":-1, "height":-1};
client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
You can also return thumbnails that are not cropped, but beware this can create large images. To do this pass a -1 to the height and/or width properties. The dimension that is passed a -1 will not be cropped.
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"width":-1, "height":-1};
client.url_to_image("https://www.tesla.com", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"width":-1, "height":-1};
client.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
var options = {"width":-1, "height":-1};
client.file_to_image("example.html", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
Using these special values means that you can create a screenshot that is a full scale version of the entire web page if you wish!
Take a Screenshot of a Page Element
GrabzIt allows you to take a screenshot of a HTML element, such as a div or span tag, and capture all its content. To do this the HTML element you want to screenshot must be specified as a CSS selector.
... <div id="features"> <img src="http://www.example.com/boat.jpg"/><h3>New Boat Launched</h3> </div> ...
For the example below we will select the div with the id "features" and output it as a 250 x 250px JPEG image.
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
// The 250 parameters indicates that image should be sized to 250 x 250 px
var options = {"width":250, "height":250, "format":"jpg","target":"#features"};
client.url_to_image("http://www.bbc.co.uk/news", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});
The next example takes another screenshot of the "features" div but this time outputs a JPEG image that is the exact size of the div.
var grabzit = require('grabzit');
var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
// The minus ones indicates that image should not be cropped
var options = {"browserHeight":-1, "width":-1, "height":-1, "format":"jpg", "target":"#features"};
client.url_to_image("http://www.bbc.co.uk/news", options);
//Then call the save or save_to method
client.save_to("result.jpg", function (error, id){
//this callback is called once the capture is downloaded
if (error != null){
throw error;
}
});