HTML to Image in Ruby

This page describes how to use the Pdfcrowd online API to convert web pages and HTML to images in Ruby. The API is user-friendly and can be integrated into your application with just a few lines of code. Refer to HTML to Image API for general information about the converter.

Below are sample images generated by the API.

Wikipedia

Stack Overflow

Installation

You can install the client library from rubygems.org

gem install pdfcrowd

Check out other installation options.

Quick Start

Here are Ruby examples for quickly getting started with the API. See more examples.

require "pdfcrowd"

begin
    # create the API client instance
    client = Pdfcrowd::HtmlToImageClient.new("demo", "ce544b6ea52a5621fb9d55f8b542d14d")

    # configure the conversion
    client.setOutputFormat("png")

    # run the conversion and write the result to a file
    client.convertUrlToFile("http://www.example.com", "example.png")

rescue Pdfcrowd::Error => why
    STDERR.puts "Pdfcrowd Error: #{why}"
    raise
end

require "pdfcrowd"

begin
    # create the API client instance
    client = Pdfcrowd::HtmlToImageClient.new("demo", "ce544b6ea52a5621fb9d55f8b542d14d")

    # configure the conversion
    client.setOutputFormat("png")

    # run the conversion and write the result to a file
    client.convertFileToFile("/path/to/MyLayout.html", "MyLayout.png")

rescue Pdfcrowd::Error => why
    STDERR.puts "Pdfcrowd Error: #{why}"
    raise
end

require "pdfcrowd"

begin
    # create the API client instance
    client = Pdfcrowd::HtmlToImageClient.new("demo", "ce544b6ea52a5621fb9d55f8b542d14d")

    # configure the conversion
    client.setOutputFormat("png")

    # run the conversion and write the result to a file
    client.convertStringToFile("<html><body><h1>Hello World!</h1></body></html>", "HelloWorld.png")

rescue Pdfcrowd::Error => why
    STDERR.puts "Pdfcrowd Error: #{why}"
    raise
end

Authentication

The credentials to access the API are your Pdfcrowd username and the API key. You can try out the API without registering using the following demo credentials:

Username: demo
API key: ce544b6ea52a5621fb9d55f8b542d14d

To get your personal API credentials, you can start a free API trial or buy the API license.

API Output Preview

To get a quick idea of what the API output will look like, enter a web page or upload an HTML file using the form below. It will generate several API output previews with different conversion settings. You can then choose the one that looks best, and simply copy and paste the auto-generated API integration code into your Ruby application.

Common Customizations

The API enables conversion of a web page, a local HTML file, or a string containing HTML. Conversion output can be saved to to a local file, a stream object or a variable. See the conversion input section of the documentation for more details.

The table below lists the most common customizations. You can also interactively explore the API in the API Playground.

Image size	Set image dimensions with setScreenshotWidth and setScreenshotHeight.
Image format	Specify a different output image format with setOutputFormat.
Hide or remove elements	You can use the following classes in your HTML code to hide or remove elements from the output: `pdfcrowd-remove` - sets `display:none!important` on the element `pdfcrowd-hide` - sets `visibility:hidden!important` on the element Learn about other options.
Use @media print	You can switch to the print version of the page (if it exists) with setUsePrintMedia.
Run custom JavaScript	You can use setOnLoadJavascript or setCustomJavascript to alter the HTML contents with a custom JavaScript. In addition to the standard browser APIs, the custom JavaScript code can use helper functions from our JavaScript library .
Custom CSS styling	You can alter CSS styling used during conversion with a custom JavaScript or using the `pdfcrowd-body` CSS class, which is automatically set on the HTML <body> element. You can, for example, set the H1 height to 48px by adding the following line to your CSS: `.pdfcrowd-body h1 { font-size: 48px; }`
HTML Templates	Add data to your HTML template and convert it to an image. Learn more in HTML Template to Image.

Error Handling

It is recommended that you implement error handling to catch errors that the API may return, see the example code below. A list of status codes and their description can be found here.

begin 
    # call the API 
rescue Pdfcrowd::Error => why 
    # print the error
    STDERR.puts "Pdfcrowd Error: #{why}"

    # print the error code
    STDERR.puts "Pdfcrowd Error Code: #{why.getCode()}"

    # print the error message
    STDERR.puts "Pdfcrowd Error Message: #{why.getMessage()}"
end

Troubleshooting

Refer to the API Status Codes page if the API returns an error.
You can use setDebugLog and getDebugLogUrl to get detailed info about the conversion, such as load errors, load times, browser console output, etc.
Check the FAQ.
You can use our JavaScript library to resolve rendering problems, such as missing content or blank pages.
Just use setCustomJavascript with libPdfcrowd.highlightHtmlElements method call to visualize all HTML elements. See the backgrounds example , borders example and helper JavaScript library documentation.
The maximum size of the created image is 65 megapixels. Larger images are cropped vertically.
Contact us if you need help or are missing a feature.

API Method Reference

Refer to the HTML to Image Ruby Reference for a description of all API methods.