GrabzIt
Tools to Capture and Convert the Web

Capture Website Screenshots or Convert HTML to ImagesRuby API

Produce better image screenshots of webpages or convert HTML straight to images by using the following features of GrabzIt's Ruby 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 create the image.

Basic Options

Only 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.

grabzItClient.url_to_image("http://www.google.com")
# Then call the save or save_to method
grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>")
# Then call the save or save_to method
grabzItClient.file_to_image("example.html")
# Then call the save or save_to method

Image Formats

GrabzIt's Ruby API can take image screenshots in several formats, including JPG, PNG, 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.

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.url_to_image("http://www.google.com", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method

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. To set the browser size just pass a value to the browserWidth and browserHeight methods of the ImageOptions class.

Avoiding a Distorted Screenshot

To avoid a distorted image when specifying the width and height methods ensure that the same ratio is kept between each dimension. For instance if you want a screenshot with a width of 256, which is a quarter of the default browser width of 1024, then the height must be a quarter of the default browser height of 800. So the final dimensions would be 256 × 200.

Custom Identifier

You can pass a custom identifier to the image methods as shown below, this value is then returned to your GrabzIt Ruby handler. For instance this custom identifier could be a database identifier, allowing a screenshot to be associated with a particular database record.

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.url_to_image("http://www.google.com", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method

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 method.

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1

grabzItClient.url_to_image("http://www.google.com", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.browserHeight = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.browserHeight = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method

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 methods. The dimension that is passed a -1 will not be cropped.

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.url_to_image("http://www.google.com", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
Note there is no full length browser width!

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 id or class of the HTML element you want to screenshot must be specified as a CSS Selector.

...
<div id="features">
	<img src="http://www.example.com/rocket.jpg"/><h3>Rocket Launch Next Week</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.

# The 250 parameters indicates that image should be sized to 250 x 250 px
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method

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.

# The -1 indicates that image should not be cropped
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"
options.browserHeight = -1

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method