HTML to Image API - Node.js

Convert web pages and HTML documents to various image formats in Node.js using the Pdfcrowd API v2. The API is easy to use and the integration takes only a couple of lines of code.

Installation

Install the client library from npm
npm install pdfcrowd

Learn more about other install options.

Authentication

Authentication is needed in order to use the Pdfcrowd API. The credentials used for accessing the API are your Pdfcrowd username and the API key.
Sign up for a Free Trial

Examples

var pdfcrowd = require("pdfcrowd");

// create the API client instance
var client = new pdfcrowd.HtmlToImageClient(
    "demo", "ce544b6ea52a5621fb9d55f8b542d14d");

// configure the conversion
try {
    client.setOutputFormat("png");
} catch(why) {
    console.error("Pdfcrowd Error: " + why);
    console.error("Pdfcrowd Error Code: " + why.getCode());
    console.error("Pdfcrowd Error Message: " + why.getMessage());
    process.exit(1);
}

// run the conversion and write the result to a file
client.convertUrlToFile(
    "http://www.example.com",
    "example.png",
    function(err, fileName) {
        if (err) return console.error("Pdfcrowd Error: " + err);
        console.log("Success: the file was created " + fileName);
    });
var pdfcrowd = require("pdfcrowd");

// create the API client instance
var client = new pdfcrowd.HtmlToImageClient(
    "demo", "ce544b6ea52a5621fb9d55f8b542d14d");

// configure the conversion
try {
    client.setOutputFormat("png");
} catch(why) {
    console.error("Pdfcrowd Error: " + why);
    console.error("Pdfcrowd Error Code: " + why.getCode());
    console.error("Pdfcrowd Error Message: " + why.getMessage());
    process.exit(1);
}

// use predefined callback for saving to a file
var callbacks = pdfcrowd.saveToFile("example.png");

// set custom error callback
callbacks.error = function(errMessage, statusCode) {
    if(statusCode) {
        console.error("Pdfcrowd Error: " + statusCode + " - " + errMessage);
    } else {
        console.error("Pdfcrowd Error: " + errMessage);
    }
};

// run the conversion and write the result to a file
client.convertUrl("http://www.example.com", callbacks);
var pdfcrowd = require("pdfcrowd");

// create the API client instance
var client = new pdfcrowd.HtmlToImageClient(
    "demo", "ce544b6ea52a5621fb9d55f8b542d14d");

// configure the conversion
try {
    client.setOutputFormat("png");
} catch(why) {
    console.error("Pdfcrowd Error: " + why);
    console.error("Pdfcrowd Error Code: " + why.getCode());
    console.error("Pdfcrowd Error Message: " + why.getMessage());
    process.exit(1);
}

// run the conversion and write the result to a file
client.convertFileToFile(
    "/path/to/MyLayout.html",
    "MyLayout.png",
    function(err, fileName) {
        if (err) return console.error("Pdfcrowd Error: " + err);
        console.log("Success: the file was created " + fileName);
    });
var pdfcrowd = require("pdfcrowd");

// create the API client instance
var client = new pdfcrowd.HtmlToImageClient(
    "demo", "ce544b6ea52a5621fb9d55f8b542d14d");

// configure the conversion
try {
    client.setOutputFormat("png");
} catch(why) {
    console.error("Pdfcrowd Error: " + why);
    console.error("Pdfcrowd Error Code: " + why.getCode());
    console.error("Pdfcrowd Error Message: " + why.getMessage());
    process.exit(1);
}

// use predefined callback for saving to a file
var callbacks = pdfcrowd.saveToFile("MyLayout.png");

// set custom error callback
callbacks.error = function(errMessage, statusCode) {
    if(statusCode) {
        console.error("Pdfcrowd Error: " + statusCode + " - " + errMessage);
    } else {
        console.error("Pdfcrowd Error: " + errMessage);
    }
};

// run the conversion and write the result to a file
client.convertFile("/path/to/MyLayout.html", callbacks);
var pdfcrowd = require("pdfcrowd");

// create the API client instance
var client = new pdfcrowd.HtmlToImageClient(
    "demo", "ce544b6ea52a5621fb9d55f8b542d14d");

// configure the conversion
try {
    client.setOutputFormat("png");
} catch(why) {
    console.error("Pdfcrowd Error: " + why);
    console.error("Pdfcrowd Error Code: " + why.getCode());
    console.error("Pdfcrowd Error Message: " + why.getMessage());
    process.exit(1);
}

// run the conversion and write the result to a file
client.convertStringToFile(
    "<html><body><h1>Hello World!</h1></body></html>",
    "HelloWorld.png",
    function(err, fileName) {
        if (err) return console.error("Pdfcrowd Error: " + err);
        console.log("Success: the file was created " + fileName);
    });
var pdfcrowd = require("pdfcrowd");

// create the API client instance
var client = new pdfcrowd.HtmlToImageClient(
    "demo", "ce544b6ea52a5621fb9d55f8b542d14d");

// configure the conversion
try {
    client.setOutputFormat("png");
} catch(why) {
    console.error("Pdfcrowd Error: " + why);
    console.error("Pdfcrowd Error Code: " + why.getCode());
    console.error("Pdfcrowd Error Message: " + why.getMessage());
    process.exit(1);
}

// use predefined callback for saving to a file
var callbacks = pdfcrowd.saveToFile("HelloWorld.png");

// set custom error callback
callbacks.error = function(errMessage, statusCode) {
    if(statusCode) {
        console.error("Pdfcrowd Error: " + statusCode + " - " + errMessage);
    } else {
        console.error("Pdfcrowd Error: " + errMessage);
    }
};

// run the conversion and write the result to a file
client.convertString("<html><body><h1>Hello World!</h1></body></html>", callbacks);
var pdfcrowd = require("pdfcrowd");

// create the API client instance
var client = new pdfcrowd.HtmlToImageClient(
    "demo", "ce544b6ea52a5621fb9d55f8b542d14d");

// configure the conversion
try {
    client.setOutputFormat("png");
    client.setDebugLog(true);
} catch(why) {
    console.error("Pdfcrowd Error: " + why);
    console.error("Pdfcrowd Error Code: " + why.getCode());
    console.error("Pdfcrowd Error Message: " + why.getMessage());
    process.exit(1);
}

// run the conversion and write the result to a file
client.convertFileToFile(
    "/path/to/MyLayout.html",
    "MyLayout.png",
    function(err, fileName) {
        if (err) return console.error("Pdfcrowd Error: " + err);
        console.log("Success: the file was created " + fileName);
        
        // print URL to the debug log
        console.log("Debug log url: " + client.getDebugLogUrl());
        
        // print the number of available conversion credits in your account
        console.log("Remaining credit count: " + client.getRemainingCreditCount());
        
        // print the number of credits consumed by the conversion
        console.log("Consumed credit count: " + client.getConsumedCreditCount());
        
        // print the unique ID of the conversion
        console.log("Job id: " + client.getJobId());
        
        // print the size of the output in bytes
        console.log("Output size: " + client.getOutputSize());
    });

Common Customizations

The API lets you convert a web page, a local HTML file, or a string containing HTML. The result of the conversion can be stored to a local file, to a stream object or to a variable. See the conversion input section for more details.

The best way to start with the API is to choose one of the examples and once you get it working, you can further customize the code. You can find the most common customizations in the table below.

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

Error Handling

try {
    // call the API 
}
catch(why) {
    // print error
    console.error("Pdfcrowd Error: " + why);

    // print just error code
    console.error("Pdfcrowd Error Code: " + why.getCode());

    // print just error message
    console.error("Pdfcrowd Error Message: " + why.getMessage());

    // or handle the error in your way
}

Troubleshooting

  • Check API Status Codes in case of the error code is returned.
  • You can use setDebugLog and getDebugLogUrl to get detailed info about the conversion, such as conversion errors, time, console output.
  • 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 example and helper JavaScript library documentation.
  • The maximum size of the created image is 65 megapixels. Larger images are cropped vertically.
  • Take a look at the FAQ section.

API Reference - class HtmlToImageClient

Conversion from HTML to image. All setter methods return HtmlToImageClient object unless otherwise specified.

Constructor

function HtmlToImageClient(userName, apiKey)
Constructor for the Pdfcrowd API client.
userName
Your username at Pdfcrowd.
apiKey
Your API key.

 

Conversion Format

function setOutputFormat(outputFormat)
The format of the output file.
outputFormat
Allowed values:
  • png
  • jpg
  • gif
  • tiff
  • bmp
  • ico
  • ppm
  • pgm
  • pbm
  • pnm
  • psb
  • pct
  • ras
  • tga
  • sgi
  • sun
  • webp
Default: png

 

Conversion Input

function convertUrl(url, callbacks)
Convert a web page.
url
The address of the web page to convert.
The supported protocols are http:// and https://.
callbacks
The object that defines the following functions:
  • data(readStream) - called when the output data can be read from readStream
  • error(message, statusCode) - called when an error occurs
  • end() - called when the conversion finishes
The client library provides 2 helper functions that can be used here:
  • saveToFile(filePath[, callback]) - saves the output data to a file
    • filePath - the output file path
    • callback(err, filePath) - called when the conversion finishes
  • sendImageInHttpResponse(response, contentType, fileName[, disposition]) - sends the generated image in an HTTP response
    • response - the response object
    • contentType - the response content type
    • fileName - the desired file name
    • disposition - the response content disposition, can be "attachment" or "inline", the default is "attachment".
function convertUrlToFile(url, filePath, callback)
Convert a web page and write the result to a local file.
url
The address of the web page to convert.
The supported protocols are http:// and https://.
filePath
The output file path.
The string must not be empty.
callback
The callback(error, filePath) function is called when the conversion finishes. The error object is present if an error occurred, filePath is the output file path.
function convertFile(file, callbacks)
Convert a local file.
file
The path to a local file to convert.
The file can be either a single file or an archive (.tar.gz, .tar.bz2, or .zip).
If the HTML document refers to local external assets (images, style sheets, javascript), zip the document together with the assets.
The file must exist and not be empty.
The file name must have a valid extension.
callbacks
The object that defines the following functions:
  • data(readStream) - called when the output data can be read from readStream
  • error(message, statusCode) - called when an error occurs
  • end() - called when the conversion finishes
The client library provides 2 helper functions that can be used here:
  • saveToFile(filePath[, callback]) - saves the output data to a file
    • filePath - the output file path
    • callback(err, filePath) - called when the conversion finishes
  • sendImageInHttpResponse(response, contentType, fileName[, disposition]) - sends the generated image in an HTTP response
    • response - the response object
    • contentType - the response content type
    • fileName - the desired file name
    • disposition - the response content disposition, can be "attachment" or "inline", the default is "attachment".
function convertFileToFile(file, filePath, callback)
Convert a local file and write the result to a local file.
file
The path to a local file to convert.
The file can be either a single file or an archive (.tar.gz, .tar.bz2, or .zip).
If the HTML document refers to local external assets (images, style sheets, javascript), zip the document together with the assets.
The file must exist and not be empty.
The file name must have a valid extension.
filePath
The output file path.
The string must not be empty.
callback
The callback(error, filePath) function is called when the conversion finishes. The error object is present if an error occurred, filePath is the output file path.
function convertString(text, callbacks)
Convert a string.
text
The string content to convert.
The string must not be empty.
callbacks
The object that defines the following functions:
  • data(readStream) - called when the output data can be read from readStream
  • error(message, statusCode) - called when an error occurs
  • end() - called when the conversion finishes
The client library provides 2 helper functions that can be used here:
  • saveToFile(filePath[, callback]) - saves the output data to a file
    • filePath - the output file path
    • callback(err, filePath) - called when the conversion finishes
  • sendImageInHttpResponse(response, contentType, fileName[, disposition]) - sends the generated image in an HTTP response
    • response - the response object
    • contentType - the response content type
    • fileName - the desired file name
    • disposition - the response content disposition, can be "attachment" or "inline", the default is "attachment".
function convertStringToFile(text, filePath, callback)
Convert a string and write the output to a file.
text
The string content to convert.
The string must not be empty.
filePath
The output file path.
The string must not be empty.
callback
The callback(error, filePath) function is called when the conversion finishes. The error object is present if an error occurred, filePath is the output file path.

 

General Options

function setNoBackground(noBackground)
Do not print the background graphics.
noBackground
Set to true to disable the background graphics.
Default: false
function setDisableJavascript(disableJavascript)
Do not execute JavaScript.
disableJavascript
Set to true to disable JavaScript in web pages.
Default: false
function setDisableImageLoading(disableImageLoading)
Do not load images.
disableImageLoading
Set to true to disable loading of images.
Default: false
function setDisableRemoteFonts(disableRemoteFonts)
Disable loading fonts from remote sources.
disableRemoteFonts
Set to true disable loading remote fonts.
Default: false
function setBlockAds(blockAds)
Try to block ads. Enabling this option can produce smaller output and speed up the conversion.
blockAds
Set to true to block ads in web pages.
Default: false
function setDefaultEncoding(defaultEncoding)
Set the default HTML content text encoding.
defaultEncoding
The text encoding of the HTML content.
Default: auto detect
function setHttpAuth(userName, password)
Set credentials to access HTTP base authentication protected websites.
userName
Set the HTTP authentication user name.
password
Set the HTTP authentication password.
function setUsePrintMedia(usePrintMedia)
Use the print version of the page if available (@media print).
usePrintMedia
Set to true to use the print version of the page.
Default: false
function setNoXpdfcrowdHeader(noXpdfcrowdHeader)
Do not send the X-Pdfcrowd HTTP header in Pdfcrowd HTTP requests.
noXpdfcrowdHeader
Set to true to disable sending X-Pdfcrowd HTTP header.
Default: false
function setCookies(cookies)
Set cookies that are sent in Pdfcrowd HTTP requests.
cookies
The cookie string.
Examples:
  • setCookies("session=6d7184b3bf35;token=2710")
function setVerifySslCertificates(verifySslCertificates)
Do not allow insecure HTTPS connections.
verifySslCertificates
Set to true to enable SSL certificate verification.
Default: false
function setFailOnMainUrlError(failOnError)
Abort the conversion if the main URL HTTP status code is greater than or equal to 400.
failOnError
Set to true to abort the conversion.
Default: false
function setFailOnAnyUrlError(failOnError)
Abort the conversion if any of the sub-request HTTP status code is greater than or equal to 400 or if some sub-requests are still pending. See details in a debug log.
failOnError
Set to true to abort the conversion.
Default: false
function setCustomJavascript(customJavascript)
Run a custom JavaScript after the document is loaded and ready to print. The script is intended for post-load DOM manipulation (add/remove elements, update CSS, ...). In addition to the standard browser APIs, the custom JavaScript code can use helper functions from our JavaScript library.
customJavascript
A string containing a JavaScript code.
The string must not be empty.
function setOnLoadJavascript(onLoadJavascript)
Run a custom JavaScript right after the document is loaded. The script is intended for early DOM manipulation (add/remove elements, update CSS, ...). In addition to the standard browser APIs, the custom JavaScript code can use helper functions from our JavaScript library.
onLoadJavascript
A string containing a JavaScript code.
The string must not be empty.
function setCustomHttpHeader(customHttpHeader)
Set a custom HTTP header that is sent in Pdfcrowd HTTP requests.
customHttpHeader
A string containing the header name and value separated by a colon.
Examples:
  • setCustomHttpHeader("X-My-Client-ID:k2017-12345")
function setJavascriptDelay(javascriptDelay)
Wait the specified number of milliseconds to finish all JavaScript after the document is loaded. Your API license defines the maximum wait time by "Max Delay" parameter.
javascriptDelay
The number of milliseconds to wait.
Must be a positive integer number or 0.
Default: 200
function setElementToConvert(selectors)
Convert only the specified element from the main document and its children. The element is specified by one or more CSS selectors. If the element is not found, the conversion fails. If multiple elements are found, the first one is used.
selectors
One or more CSS selectors separated by commas.
The string must not be empty.
Examples:
  • The first element with the id main-content is converted.
    setElementToConvert("#main-content")
  • The first element with the class name main-content is converted.
    setElementToConvert(".main-content")
  • The first element with the tag name table is converted.
    setElementToConvert("table")
  • The first element with the tag name table or with the id main-content is converted.
    setElementToConvert("table, #main-content")
  • The first element <p class="article"> within <div class="user-panel main"> is converted.
    setElementToConvert("div.user-panel.main p.article")
function setElementToConvertMode(mode)
Specify the DOM handling when only a part of the document is converted.
mode
Allowed values:
  • cut-out
    The element and its children are cut out of the document.
  • remove-siblings
    All element's siblings are removed.
  • hide-siblings
    All element's sibilings are hidden.
Default: cut-out
function setWaitForElement(selectors)
Wait for the specified element in a source document. The element is specified by one or more CSS selectors. The element is searched for in the main document and all iframes. If the element is not found, the conversion fails. Your API license defines the maximum wait time by "Max Delay" parameter.
selectors
One or more CSS selectors separated by commas.
The string must not be empty.
Examples:
  • Wait until an element with the id main-content is found.
    setWaitForElement("#main-content")
  • Wait until an element with the class name main-content is found.
    setWaitForElement(".main-content")
  • Wait until an element with the tag name table is found.
    setWaitForElement("table")
  • Wait until an element with the tag name table or with the id main-content is found.
    setWaitForElement("table, #main-content")
  • Wait until <p class="article"> is found within <div class="user-panel main">.
    setWaitForElement("div.user-panel.main p.article")

 

Image Output

function setScreenshotWidth(screenshotWidth)
Set the output image width in pixels.
screenshotWidth
The value must be in the range 96-65000.
Default: 1024
function setScreenshotHeight(screenshotHeight)
Set the output image height in pixels. If it is not specified, actual document height is used.
screenshotHeight
Must be a positive integer number.
function setScaleFactor(scaleFactor)
Set the scaling factor (zoom) for the output image.
scaleFactor
The percentage value.
Must be a positive integer number.
Default: 100

 

Miscellaneous

function setDebugLog(debugLog)
Turn on the debug logging. Details about the conversion are stored in the debug log. The URL of the log can be obtained from the getDebugLogUrl method or available in conversion statistics.
debugLog
Set to true to enable the debug logging.
Default: false
function getDebugLogUrl()
Get the URL of the debug log for the last conversion.
Returns
  • string - The link to the debug log.
function getRemainingCreditCount()
Get the number of conversion credits available in your account.
This method can only be called after a call to one of the convertXYZ methods.
The returned value can differ from the actual count if you run parallel conversions.
The special value 999999 is returned if the information is not available.
Returns
  • int - The number of credits.
function getConsumedCreditCount()
Get the number of credits consumed by the last conversion.
Returns
  • int - The number of credits.
function getJobId()
Get the job id.
Returns
  • string - The unique job identifier.
function getOutputSize()
Get the size of the output in bytes.
Returns
  • int - The count of bytes.
function setTag(tag)
Tag the conversion with a custom value. The tag is used in conversion statistics. A value longer than 32 characters is cut off.
tag
A string with the custom tag.
function setHttpProxy(httpProxy)
A proxy server used by Pdfcrowd conversion process for accessing the source URLs with HTTP scheme. It can help to circumvent regional restrictions or provide limited access to your intranet.
httpProxy
The value must have format DOMAIN_OR_IP_ADDRESS:PORT.
Examples:
  • setHttpProxy("myproxy.com:8080")
  • setHttpProxy("113.25.84.10:33333")
function setHttpsProxy(httpsProxy)
A proxy server used by Pdfcrowd conversion process for accessing the source URLs with HTTPS scheme. It can help to circumvent regional restrictions or provide limited access to your intranet.
httpsProxy
The value must have format DOMAIN_OR_IP_ADDRESS:PORT.
Examples:
  • setHttpsProxy("myproxy.com:443")
  • setHttpsProxy("113.25.84.10:44333")
function setClientCertificate(clientCertificate)
A client certificate to authenticate Pdfcrowd converter on your web server. The certificate is used for two-way SSL/TLS authentication and adds extra security.
clientCertificate
The file must be in PKCS12 format.
The file must exist and not be empty.
function setClientCertificatePassword(clientCertificatePassword)
A password for PKCS12 file with a client certificate if it is needed.
clientCertificatePassword

 

API Client Options

function setUseHttp(useHttp)
Specifies if the client communicates over HTTP or HTTPS with Pdfcrowd API.
useHttp
Set to true to use HTTP.
Default: false
function setUserAgent(userAgent)
Set a custom user agent HTTP header. It can be usefull if you are behind some proxy or firewall.
userAgent
The user agent string.
Default: pdfcrowd_nodejs_client/4.11.0 (http://pdfcrowd.com)
function setProxy(host, port, userName, password)
Specifies an HTTP proxy that the API client library will use to connect to the internet.
host
The proxy hostname.
port
The proxy port.
userName
The username.
password
The password.
function setRetryCount(retryCount)
Specifies the number of retries when the 502 HTTP status code is received. The 502 status code indicates a temporary network issue. This feature can be disabled by setting to 0.
retryCount
Number of retries wanted.
Default: 1