# HTML/CSS to Image

> Turn HTML and CSS into images and capture screenshots of public web pages with HTML/CSS to Image (HCTI).

App · Images & Design · 3 actions. Web page: https://docs.lodol.com/docs/integrations/htmlcsstoimage

## Actions

### 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 (`html`, text, required): The HTML markup to render, for example "<div class='card'>Hello</div>".
- CSS (`css`, text): Optional CSS styles applied to the HTML, for example ".card { padding: 24px; font-family: sans-serif; }".
- Google Fonts (`google_fonts`, text): Optional Google Fonts to load before rendering, by family name (for example 'Roboto').
- CSS selector (`selector`, text): Optional. Crop the image to the single element matching this CSS selector instead of the whole page.
- Render delay (ms) (`ms_delay`, number): Optional. Wait this many milliseconds before capturing, to let animations or fonts settle. From 0 to 30000.
- Device scale (`device_scale`, number): 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_width`, number): Optional. Width of the render viewport, in pixels. At least 1.
- Viewport height (`viewport_height`, number): Optional. Height of the render viewport, in pixels. At least 1.

**Outputs**

- `id` (text): The image id; pass it to the Get Image step to download the image
- `url` (text): The hosted URL of the rendered image

**Example output**

```json
{
  "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_id`, text, required): The id of an image from a Create Image or Take Screenshot step.
- File name (`filename`, text): Optional. Name to save the file under. The extension is adjusted to match the image's format when possible. Default: `image.png`.

**Outputs**

- `content_type` (text): MIME type of the saved image
- `document_ref` (text): Reference to the saved image, for use by a later step
- `documents` (list): The saved image, in the shape steps that send or upload files expect
- `filename` (text): Name the image was saved under
- `image_id` (text): The id of the image that was downloaded
- `size_bytes` (number): Size of the image in bytes
- `url` (text): Download URL for the saved image

**Example output**

```json
{
  "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 (`url`, text, required): The public web address (URL) to screenshot, e.g. https://example.com.
- Full page (`full_screen`, true/false): Capture the entire page height instead of just the visible area. Default: `false`.
- Render delay (ms) (`ms_delay`, number): Optional. Wait this many milliseconds after the page loads before capturing. From 0 to 30000.
- Viewport width (`viewport_width`, number): Optional. Width of the browser viewport, in pixels. At least 1.
- Viewport height (`viewport_height`, number): Optional. Height of the browser viewport, in pixels. At least 1.

**Outputs**

- `id` (text): The image id; pass it to the Get Image step to download the screenshot
- `url` (text): The hosted URL of the screenshot

**Example output**

```json
{
  "id": "a1b2c3d4-e5f6-4a7b-8c9d-0e1f2a3b4c5d",
  "url": "https://hcti.io/v1/image/a1b2c3d4-e5f6-4a7b-8c9d-0e1f2a3b4c5d"
}
```