Convert Html to Image
This endpoint allows you to convert Html into an image.
POST
https://api.cloudlayer.io/v1/html/imageMake a POST request to convert Html to an image.
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.
Param | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
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) |
| ||||||||||
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.
|
{ "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.