HTML/CSS to Image
App · Images & Design · 3 actions
Turn HTML and CSS into images and capture screenshots of public web pages with HTML/CSS to Image (HCTI).
Actions
| Action | What it does |
|---|---|
| Create Image | Render HTML (and optional CSS) into an image and get back a hosted image URL and an image id. |
| Get Image | Download an image created by a Create Image or Take Screenshot step and save it to your workspace's file storage. |
| Take Screenshot | Capture a screenshot of a public web page and get back a hosted image URL and an image id. |
Create Image
Render HTML (and optional CSS) into an image and get back a hosted image URL and an image id. Use the Get Image step with the id to download the image as a file.
Inputs
- HTML
htmltextRequired - The HTML markup to render, for example "<div class='card'>Hello</div>".
- CSS
csstext - Optional CSS styles applied to the HTML, for example ".card { padding: 24px; font-family: sans-serif; }".
- Google Fonts
google_fontstext - Optional Google Fonts to load before rendering, by family name (for example 'Roboto').
- CSS selector
selectortext - Optional. Crop the image to the single element matching this CSS selector instead of the whole page.
- Render delay (ms)
ms_delaynumber - Optional. Wait this many milliseconds before capturing, to let animations or fonts settle.From 0 to 30000.
- Device scale
device_scalenumber - Optional. Pixel density of the render, from 0.1 to 3. Use 2 or 3 for a sharper, higher-resolution image.From 0.1 to 3.
- Viewport width
viewport_widthnumber - Optional. Width of the render viewport, in pixels.At least 1.
- Viewport height
viewport_heightnumber - Optional. Height of the render viewport, in pixels.At least 1.
Outputs
idtext- The image id; pass it to the Get Image step to download the image
urltext- The hosted URL of the rendered image
Example output
{
"id": "f6a2e3d4-5b6c-4a7d-8e9f-0a1b2c3d4e5f",
"url": "https://hcti.io/v1/image/f6a2e3d4-5b6c-4a7d-8e9f-0a1b2c3d4e5f"
}Get Image
Download an image created by a Create Image or Take Screenshot step and save it to your workspace's file storage. Returns a document reference and a download URL a later step can use.
Inputs
- Image id
image_idtextRequired - The id of an image from a Create Image or Take Screenshot step.
- File name
filenametext - Optional. Name to save the file under. The extension is adjusted to match the image's format when possible.Default:
image.png.
Outputs
content_typetext- MIME type of the saved image
document_reftext- Reference to the saved image, for use by a later step
documentslist- The saved image, in the shape steps that send or upload files expect
filenametext- Name the image was saved under
image_idtext- The id of the image that was downloaded
size_bytesnumber- Size of the image in bytes
urltext- Download URL for the saved image
Example output
{
"content_type": "image/png",
"document_ref": "doc_5e6f7a8b9c0d1e2f5e6f7a8b9c0d1e2f",
"documents": [
{
"content_type": "image/png",
"document_ref": "doc_5e6f7a8b9c0d1e2f5e6f7a8b9c0d1e2f",
"filename": "image.png",
"size_bytes": 20480,
"url": "/actions/core/serve-document/doc_5e6f7a8b9c0d1e2f5e6f7a8b9c0d1e2f?teamId=6512a1b2c3d4e5f600000001"
}
],
"filename": "image.png",
"image_id": "f6a2e3d4-5b6c-4a7d-8e9f-0a1b2c3d4e5f",
"size_bytes": 20480,
"url": "/actions/core/serve-document/doc_5e6f7a8b9c0d1e2f5e6f7a8b9c0d1e2f?teamId=6512a1b2c3d4e5f600000001"
}Take Screenshot
Capture a screenshot of a public web page and get back a hosted image URL and an image id. Use the Get Image step with the id to download the screenshot as a file.
Inputs
- URL
urltextRequired - The public web address (URL) to screenshot, e.g. https://example.com.
- Full page
full_screentrue/false - Capture the entire page height instead of just the visible area.Default:
false. - Render delay (ms)
ms_delaynumber - Optional. Wait this many milliseconds after the page loads before capturing.From 0 to 30000.
- Viewport width
viewport_widthnumber - Optional. Width of the browser viewport, in pixels.At least 1.
- Viewport height
viewport_heightnumber - Optional. Height of the browser viewport, in pixels.At least 1.
Outputs
idtext- The image id; pass it to the Get Image step to download the screenshot
urltext- The hosted URL of the screenshot
Example output
{
"id": "a1b2c3d4-e5f6-4a7b-8c9d-0e1f2a3b4c5d",
"url": "https://hcti.io/v1/image/a1b2c3d4-e5f6-4a7b-8c9d-0e1f2a3b4c5d"
}