HTML to Image - HTTP POST Guide

This page serves as a guide for using the Pdfcrowd API to capture web pages and HTML content to image screenshots via HTTP POST. The API is HTTP-based and communicates through standard HTTP requests. You can call the API by sending an HTTP request to the API server address with options passed as POST data.

You can also check out our API client libraries if you want to implement the API in your favorite programming language.

Quick Start

Below are HTTP POST examples to help you quickly get started with the API. Explore our additional examples for more insights. 

curl -f -u "demo:ce544b6ea52a5621fb9d55f8b542d14d" \
    -o "MyLayout.png" \
    -F "output_format=png" \
    -F "file=@/path/to/MyLayout.html" \
    https://api.pdfcrowd.com/convert/20.10/
curl -f -u "demo:ce544b6ea52a5621fb9d55f8b542d14d" \
    -o "HelloWorld.png" \
    -F "output_format=png" \
    --form-string "text=<html><body><h1>Hello World!</h1></body></html>" \
    https://api.pdfcrowd.com/convert/20.10/

# or read HTML from a pipe
html_producer | curl -u "demo:ce544b6ea52a5621fb9d55f8b542d14d" \
    -o "HelloWorld.png" \
    -F "output_format=png" \
    -F "text=<-" \
    https://api.pdfcrowd.com/convert/20.10/

Authentication

To access the API, you will need to use your Pdfcrowd username and API key. For initial testing, you may use the following demo credentials without registering:

  • Username: demo
  • API key: ce544b6ea52a5621fb9d55f8b542d14d

To obtain your personal API credentials, consider starting a free API trial or purchasing the API license.

The authentication method for user credentials is HTTP Basic Access Authentication. You provide your credentials every time you make a request.

Server Address

The primary server address is https://api.pdfcrowd.com/convert/20.10/

Alternative addresses include:

  • https://api.pdfcrowd.com/convert/latest/ for the latest converter version.
  • https://api.pdfcrowd.com/convert/20.10/ specifically for version 20.10.
  • https://api.pdfcrowd.com/convert/18.10/ specifically for version 18.10.
  • https://api.pdfcrowd.com/convert/ serves as a shortcut to version 18.10.

The content type for POST requests must be `multipart/form-data` if the request uploads any local files. Otherwise, `application/x-www-form-urlencoded` can also be used.

API Output Preview

Quickly preview the API output by entering a URL or uploading an HTML file below. This will generate previews with different API settings. You can then choose the one you prefer and use the respective API settings in your application.

Below are sample images generated by the API.
sample
Wikipedia sample
Stack Overflow sample
Reddit

Customization

The API supports converting a webpage, an HTML file, or a string containing HTML.

The table below highlights the most common customizations you might find useful. Refer to the Option Reference for a detailed description of all available options. For an interactive experience, explore these options in the API Playground.

For additional customization options and troubleshooting, please visit the FAQ section of our website where you can find answers and help related to frequent queries and common issues.

Image size Customize the dimensions of the captured images using the screenshot_width and screenshot_height.
Image format Change the ouput image format using output_format.
Hide or Remove Contents Utilize the following classes in your HTML code to hide or remove elements from the output:
  • `pdfcrowd-remove`: This class applies `display:none!important` to the element, effectively removing it from the layout.
  • `pdfcrowd-hide`: This class applies `visibility:hidden!important` to the element, making it invisible but still occupying space in the layout.
For additional methods and detailed explanations, refer to this FAQ article.
Custom CSS Styling To customize CSS styling specifically for the conversion, use custom_css to inject additional styles.

Alternatively, you can directly incorporate conversion-specific styling into your main stylesheet. Just prefix your CSS selectors with `.pdfcrowd-body` to ensure the styles apply only during the conversion process. For example:
.pdfcrowd-body h1 { font-size: 48px; }
.pdfcrowd-body footer { display: none; }
Use `@media print` Activate the print version of a webpage (if available) using use_print_media. This function instructs the API to apply the CSS rules defined within the `@media print` stylesheet, ensuring the output mirrors the print-optimized version of the webpage.
Inject Custom JavaScript Utilize custom_javascript or on_load_javascript to modify HTML content using custom JavaScript scripts. These scripts run when the page loads, allowing you to dynamically alter elements, styles, or behavior. In addition to the standard browser JavaScript APIs, your scripts can leverage helper functions provided by our JavaScript library.
HTML Templates Add data to your HTML templates for dynamic generation tailored to specific content needs. For details, refer to HTML Template to Image.

Response Headers

The HTTP response contains the following headers.

Name Description
x-pdfcrowd-debug-log URL of the debug log
x-pdfcrowd-remaining-credits The number of conversion credits remaining in your account
x-pdfcrowd-consumed-credits The number of credits used for the conversion
x-pdfcrowd-job-id The unique identifier for the conversion
x-pdfcrowd-output-size Size of the output data in bytes

Troubleshooting

  • If you are receiving an error, refer to the API Status Codes for more information.
  • Utilize debug_log to obtain detailed information about the conversion process, including load errors, load times, browser console output, etc.
  • Consult the FAQ for answers to common questions.
  • The maximum size for any created image is 65 megapixels. Images exceeding this size are cropped vertically to meet this limit.
  • Contact us if you need assistance or if there is a feature you are missing.

POST Parameter Reference

Refer to the HTML to Image POST Reference for a description of all options.