POST

/html/image

This endpoint is used to convert any valid Html to an Image. It allows full configuration options described in the table below to be passed into the json body.

ParamDescription
html
(base64 string)

base64 Encoded HTML string. (This must be base64 encoded, all other formats will be rejected.)

Required
timeout
(number)

Amount of time that Chrome is allowed to run, if exceeded your job will be terminated and you will not be charged.

Default: 30000 ms (30 seconds)
delay
(number)

The amount of time in milliseconds to wait for the page to complete rendering before conversion.

Default: 0
filename
(string)

If used with the inline:false, will set the Content-Disposition filename so that the downloaded file will be set to this value in the users browser. For inline:true it has no effect.

Default: 'file.pdf'
inline
(boolean)

If set to true, set's the Content-Disposition to 'inline', if set to false it will set the Content-Disposition to 'attachment'. See 'filename' property if you want to set the filename value for the attachment.

Default: false
waitForSelector
(waitForSelector)
selector
(string)
 A selector of an element on the page to wait for until starting conversion.
options
(waitForSelectorOptions)

Different wait options

visible
(boolean)
 Wait until the selector is visible. If you set hidden to true, it will negate this option.
hidden
(boolean)
 Wait until the selector is hidden. If you set visible to true, it will negate this option.
timeout
(number)
 Amount of time to wait for either of the options within waitForSelector to complete before aborting the request. This is inclusive to timeout property, and delay is additive occurring after this completes.
preferCSSPageSize
(boolean)

Give any CSS @page size declared in the page priority over what is declared in width and height or format options.

Default: false
scale
(boolean)

Scale of the webpage rendering. Defaults to 1. Scale amount must be between 0.1 and 2.

Default: 1
height
(string)

Paper height, accepts values labeled with units.

Default: (empty)
width
(string)

Paper width, accepts values labeled with units.

Default: (empty)
landscape
(boolean)

Paper orientation, false sets it to portrait and true to landscape.

Default: false
pageRanges
(string)

Paper ranges to print, e.g., '1-5, 8, 11-13'. Defaults to the empty string, which means print all pages.

Default: (empty"
autoScroll
(boolean)

Will attempt to auto scroll the page down to the very end. Useful for forcing lazy-loaded content to load.

Default: false
waitUntil
(waitUntil)

When to consider navigation succeeded, defaults to networkidle2 Must be one one of the following values: load, domcontentloaded, networkidle0, networkidle2.

load Consider navigation to be finished when the load event is fired.
domcontentloaded Consider navigation to be finished when the DOMContentLoaded event is fired.
networkidle0 Consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.
networkidle2 Consider navigation to be finished when there are no more than 2 network connections for at least 500 ms. 
    {
  "html": "",
  "timeout": 30000,
  "delay": 0,
  "filename": "file.pdf",
  "inline": false,
  "waitForSelector": {
    "selector": "",
    "options": {
      "visible": false,
      "hidden": false,
      "timeout": 0
    }
  },
  "preferCSSPageSize": false,
  "scale": 1,
  "height": "",
  "width": "",
  "landscape": false,
  "pageRanges": "",
  "autoScroll": false,
  "waitUntil": "networkidle2"
}
Copied!
Example

For example, if you had the following Html snippet, and the base64 string of the Html snippet. 

    <!DOCTYPE html>
  <html>
    <body style="background-color: #35276a; color: #fff">
      <h1>My First Heading</h1>
      <p>My first paragraph.</p>
      <p id="test"></p>
      <script>
        document.getElementById("test").innerHTML = "This text was added by Javascript!";
      </script>
    </body>
  </html>
Copied!

In the above example, we have the HTML snippet, and on the second tab called 'base64' is the HTML snippet encoded into a base64 string. To convert it to an image, we pass the base64 string into the HTML property.

Also included in the example is a demonstration of how Javascript gets used in your HTML. It is a simplistic example, but since we use a full Chrome instance to render, you can use mostly anything Chrome supports. The only caveat is that if you are using HTML, it must be embedded or publicly accessible. We support fetching scripts from public CDNs or public sources, for example, and those will get included. 

    wget --method POST \
--header 'X-API-Key: <api key>' \
--header 'Content-Type: application/json' \
--body-data \ +
'{
"html": "PCFET0NUWVBFIGh0bWw+CiAgPGh0bWw+CiAgICA8Ym9keSBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzM1Mjc2YTsgY29sb3I6ICNmZmYiPgogICAgICA8aDE+TXkgRmlyc3QgSGVhZGluZzwvaDE+CiAgICAgIDxwPk15IGZpcnN0IHBhcmFncmFwaC48L3A+CiAgICAgIDxwIGlkPSJ0ZXN0Ij48L3A+CiAgICAgIDxzY3JpcHQ+CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInRlc3QiKS5pbm5lckhUTUwgPSAiVGhpcyB0ZXh0IHdhcyBhZGRlZCBieSBKYXZhc2NyaXB0ISI7CiAgICAgIDwvc2NyaXB0PgogICAgPC9ib2R5PgogIDwvaHRtbD4="
}' \
https://api.cloudlayer.io/v1/html/image
Copied!
Result

Significantly more complex HTML with embedded images, CSS, etc. can be used as long as they get embedded as base64. For images, you can embed them into the src property as a base64 string. You can read more about how to do that here.