HTML to Image HTTP API Code Examples

Complete HTTP requests for common conversion tasks. See the HTTP API guide for request formats and response handling.

You can run the examples below with the displayed API credentials. Update the input URLs and filenames as needed.

cURL example options

Use a Bash-compatible shell.

Basic options

  • -u — Supply your username and API key.
  • -F — Send a form field.
  • --form-string — Send a literal form value.
  • -o — Save the response to a file.
  • -f — Report HTTP errors as command failures.
  • -s -S — Hide the progress meter while keeping error messages.

File input

  • file=@document.html — Upload a local file.
  • text=<- — Read HTML from standard input. The examples use < document.html to supply the file's contents.

Diagnostics

  • --fail-with-body — Use instead of -f to retain the error response body.
  • -D — Save response headers to a file.
  • -w — Print response information; the diagnostic example prints the HTTP status.

Basic examples

Convert a URL

curl -f -s -S \
  -u 'demo:demo' \
  -o example.png \
  -F url=https://example.com/ \
  -F output_format=png \
  https://api.pdfcrowd.com/convert/24.04/

Convert an HTML file

Upload an existing document.html file.

curl -f -s -S \
  -u 'demo:demo' \
  -o document.png \
  -F file=@document.html \
  -F output_format=png \
  https://api.pdfcrowd.com/convert/24.04/

For local images and stylesheets, include the HTML and its assets in an archive.

Send HTML content

Send HTML in the text field. This command reads it from an existing document.html file.

curl -f -s -S \
  -u 'demo:demo' \
  -o html.png \
  -F 'text=<-' \
  -F output_format=png \
  https://api.pdfcrowd.com/convert/24.04/ < document.html

In your application, pass the HTML produced by your template renderer as the value of text.

Page rendering

Set screenshot width and scale

Capture a 1280-pixel-wide viewport and scale the PNG output to 50%.

curl -f -s -S \
  -u 'demo:demo' \
  -o customized.png \
  -F url=https://example.com/ \
  -F output_format=png \
  -F scale_factor=50 \
  -F screenshot_width=1280 \
  https://api.pdfcrowd.com/convert/24.04/

Hide or restyle page elements

Replace the selectors with elements from your page.

curl -f -s -S \
  -u 'demo:demo' \
  -o custom_css.png \
  -F url=https://example.com/ \
  -F output_format=png \
  --form-string 'custom_css=
    /* Hide navigation, ads, and sidebar */
    nav, .advertisement, .sidebar, footer {
        display: none !important;
    }
    /* Adjust layout for screenshot */
    .content {
        width: 100% !important;
        max-width: none !important;
    }' \
  https://api.pdfcrowd.com/convert/24.04/

Modify the page with JavaScript

This example removes widgets and expands sections by changing their CSS classes. Adjust the selectors and class names for your page.

curl -f -s -S \
  -u 'demo:demo' \
  -o custom_js.png \
  -F url=https://example.com/ \
  -F output_format=png \
  --form-string 'custom_javascript=
    // Remove dynamic content before conversion
    document.querySelectorAll('"'"'.video-player, .chat-widget'"'"').forEach(el => {
        el.remove();
    });
    // Expand collapsed sections
    document.querySelectorAll('"'"'.collapsed'"'"').forEach(el => {
        el.classList.remove('"'"'collapsed'"'"');
    });' \
  https://api.pdfcrowd.com/convert/24.04/

Convert a specific element

Convert only the element matching #main in an existing document.html file. Adjust the filename and selector for your document.

curl -f -s -S \
  -u 'demo:demo' \
  -o html_part.png \
  -F file=@document.html \
  -F output_format=png \
  -F 'element_to_convert=#main' \
  https://api.pdfcrowd.com/convert/24.04/

Wait for a page element

Wait for #content-loaded to appear in an existing document.html file before converting it.

# Wait for a specific element to appear
curl -f -s -S \
  -u 'demo:demo' \
  -o wait_element.png \
  -F file=@document.html \
  -F output_format=png \
  -F 'wait_for_element=#content-loaded' \
  https://api.pdfcrowd.com/convert/24.04/

Choose an element that appears when your content is ready.

Allow extra time for JavaScript

# Wait for a specified time before conversion
curl -f -s -S \
  -u 'demo:demo' \
  -o with_delay.png \
  -F url=https://example.com/ \
  -F output_format=png \
  -F javascript_delay=2000 \
  https://api.pdfcrowd.com/convert/24.04/

This adds a delay of 2000 milliseconds. When the page has a reliable readiness marker, use Wait for a page element.

Apply the page’s @media print rules. The page must provide print styles for this to change its appearance.

curl -f -s -S \
  -u 'demo:demo' \
  -o print_media.png \
  -F url=https://example.com/ \
  -F output_format=png \
  -F use_print_media=true \
  https://api.pdfcrowd.com/convert/24.04/

HTML and CSS

Add these fragments to HTML you control.

Remove or hide elements

<nav class="pdfcrowd-remove">This won't appear in the screenshot</nav>
<div class="pdfcrowd-hide">This is invisible but takes up space</div>

pdfcrowd-remove removes the element from the layout. pdfcrowd-hide preserves its space.

Apply styles only during conversion

<style>
  /* These styles only apply during image conversion */
  .pdfcrowd-body h1 { font-size: 48px; }
  .pdfcrowd-body footer { display: none; }
  .pdfcrowd-body .main-content { width: 100%; }
</style>

The .pdfcrowd-body prefix limits these rules to conversion; it does not change the page in a visitor’s browser.

Templates

Render a template with a data file

Render an HTML template with JSON data by uploading existing template.html and data.json files. See the template rendering guide for template syntax, data mapping, and other supported data formats.

curl -f -s -S \
  -u 'demo:demo' \
  -o output.png \
  -F file=@template.html \
  -F data_file=@data.json \
  -F output_format=png \
  -F data_format=json \
  https://api.pdfcrowd.com/convert/24.04/