HTML to Image API - Node.js SDK

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

You can learn more about other install options here.

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. You can sign up for the Pdfcrowd API here.

Examples

Convert a web page to a PNG file
var pdfcrowd = require("pdfcrowd");

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

// 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);
    });
Convert a web page to a PNG file via custom callbacks
var pdfcrowd = require("pdfcrowd");

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

// 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);
Convert a local HTML file to a PNG file
var pdfcrowd = require("pdfcrowd");

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

// 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);
    });
Convert a local HTML file to a PNG file via custom callbacks
var pdfcrowd = require("pdfcrowd");

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

// 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);
Convert a string containing HTML to a PNG file
var pdfcrowd = require("pdfcrowd");

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

// 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);
    });
Convert a string containing HTML to a PNG file via custom callbacks
var pdfcrowd = require("pdfcrowd");

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

// 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);
Get info about the current conversion
var pdfcrowd = require("pdfcrowd");

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

// 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());
    });

Tips & Tricks

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:

You can also use these HTML related features:

  • You can use the following classes in your HTML code which hide/remove elements from the output:
    • pdfcrowd-remove - sets display:none on the element
    • pdfcrowd-hide - sets visibility:hidden on the element
  • You can switch to the print version of the page (if it exists) with setUsePrintMedia.
  • You can force a page break with
    <div style="page-break-before:always"></div>
  • You can avoid a page break inside an element with the following CSS
    img { page-break-inside:avoid }
  • You can use setCustomJavascript to alter the HTML contents with a custom JavaScript.

API Reference - class HtmlToImageClient

Conversion from HTML to image.

Constructor

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

 

Conversion Format

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

 

Conversion Input

function convertUrl(url, callbacks)
Convert a web page.
Parameter Description Default
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.
Parameter Description Default
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.
Parameter Description Default
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.
Parameter Description Default
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.
Parameter Description Default
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.
Parameter Description Default
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.
Parameter Description Default
noBackground
Set to true to disable the background graphics.
false
Returns
  • HtmlToImageClient - The converter object.
function setDisableJavascript(disableJavascript)
Do not execute JavaScript.
Parameter Description Default
disableJavascript
Set to true to disable JavaScript in web pages.
false
Returns
  • HtmlToImageClient - The converter object.
function setDisableImageLoading(disableImageLoading)
Do not load images.
Parameter Description Default
disableImageLoading
Set to true to disable loading of images.
false
Returns
  • HtmlToImageClient - The converter object.
function setDisableRemoteFonts(disableRemoteFonts)
Disable loading fonts from remote sources.
Parameter Description Default
disableRemoteFonts
Set to true disable loading remote fonts.
false
Returns
  • HtmlToImageClient - The converter object.
function setBlockAds(blockAds)
Try to block ads. Enabling this option can produce smaller output and speed up the conversion.
Parameter Description Default
blockAds
Set to true to block ads in web pages.
false
Returns
  • HtmlToImageClient - The converter object.
function setDefaultEncoding(defaultEncoding)
Set the default HTML content text encoding.
Parameter Description Default
defaultEncoding
The text encoding of the HTML content.
auto detect
Returns
  • HtmlToImageClient - The converter object.
function setHttpAuth(userName, password)
Set credentials to access HTTP base authentication protected websites.
Parameter Description Default
userName
Set the HTTP authentication user name.
password
Set the HTTP authentication password.
Returns
  • HtmlToImageClient - The converter object.
function setUsePrintMedia(usePrintMedia)
Use the print version of the page if available (@media print).
Parameter Description Default
usePrintMedia
Set to true to use the print version of the page.
false
Returns
  • HtmlToImageClient - The converter object.
function setNoXpdfcrowdHeader(noXpdfcrowdHeader)
Do not send the X-Pdfcrowd HTTP header in Pdfcrowd HTTP requests.
Parameter Description Default
noXpdfcrowdHeader
Set to true to disable sending X-Pdfcrowd HTTP header.
false
Returns
  • HtmlToImageClient - The converter object.
function setCookies(cookies)
Set cookies that are sent in Pdfcrowd HTTP requests.
Parameter Description Default
cookies
The cookie string.
Returns
  • HtmlToImageClient - The converter object.
Examples:
  • setCookies("session=6d7184b3bf35;token=2710")
function setVerifySslCertificates(verifySslCertificates)
Do not allow insecure HTTPS connections.
Parameter Description Default
verifySslCertificates
Set to true to enable SSL certificate verification.
false
Returns
  • HtmlToImageClient - The converter object.
function setFailOnMainUrlError(failOnError)
Abort the conversion if the main URL HTTP status code is greater than or equal to 400.
Parameter Description Default
failOnError
Set to true to abort the conversion.
false
Returns
  • HtmlToImageClient - The converter object.
function setFailOnAnyUrlError(failOnError)
Abort the conversion if any of the sub-request HTTP status code is greater than or equal to 400.
Parameter Description Default
failOnError
Set to true to abort the conversion.
false
Returns
  • HtmlToImageClient - The converter object.
function setCustomJavascript(customJavascript)
Run a custom JavaScript after the document is loaded. The script is intended for post-load DOM manipulation (add/remove elements, update CSS, ...).
Parameter Description Default
customJavascript
String containing a JavaScript code.
The string must not be empty.
Returns
  • HtmlToImageClient - The converter object.
function setCustomHttpHeader(customHttpHeader)
Set a custom HTTP header that is sent in Pdfcrowd HTTP requests.
Parameter Description Default
customHttpHeader
A string containing the header name and value separated by a colon.
Returns
  • HtmlToImageClient - The converter object.
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. The maximum value is determined by your API license.
Parameter Description Default
javascriptDelay
The number of milliseconds to wait.
Must be a positive integer number or 0.
200
Returns
  • HtmlToImageClient - The converter object.
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.
Parameter Description Default
selectors
One or more CSS selectors separated by commas.
The string must not be empty.
Returns
  • HtmlToImageClient - The converter object.
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.
Parameter Description Default
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.
cut-out
Returns
  • HtmlToImageClient - The converter object.
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.
Parameter Description Default
selectors
One or more CSS selectors separated by commas.
The string must not be empty.
Returns
  • HtmlToImageClient - The converter object.
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.
Parameter Description Default
screenshotWidth
The value must be in a range 96-7680.
1024
Returns
  • HtmlToImageClient - The converter object.
function setScreenshotHeight(screenshotHeight)
Set the output image height in pixels. If it's not specified, actual document height is used.
Parameter Description Default
screenshotHeight
Must be a positive integer number.
Returns
  • HtmlToImageClient - The converter object.

 

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.
Parameter Description Default
debugLog
Set to true to enable the debug logging.
false
Returns
  • HtmlToImageClient - The converter object.
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.
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.
Parameter Description Default
tag
A string with the custom tag.
Returns
  • HtmlToImageClient - The converter object.

 

API Client Options

function setUseHttp(useHttp)
Specifies if the client communicates over HTTP or HTTPS with Pdfcrowd API.
Parameter Description Default
useHttp
Set to true to use HTTP.
false
Returns
  • HtmlToImageClient - The converter object.
function setUserAgent(userAgent)
Set a custom user agent HTTP header. It can be usefull if you are behind some proxy or firewall.
Parameter Description Default
userAgent
The user agent string.
pdfcrowd_nodejs_client/4.3.5 (http://pdfcrowd.com)
Returns
  • HtmlToImageClient - The converter object.
function setProxy(host, port, userName, password)
Specifies an HTTP proxy that the API client library will use to connect to the internet.
Parameter Description Default
host
The proxy hostname.
port
The proxy port.
userName
The username.
password
The password.
Returns
  • HtmlToImageClient - The converter object.
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.
Parameter Description Default
retryCount
Number of retries wanted.
1
Returns
  • HtmlToImageClient - The converter object.

 

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 by 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.highlightHtml(borders, backgrounds, labels, noZeroSpace) method call to visualize all HTML elements. See example.
  • Take a look at the FAQ section.