html-to-image-render

Original：🇨🇳 Chinese

Translated

1 scripts

Used when you need to render HTML files into images, including reading HTML files, performing rendering, and saving the generated images to local files.

3installs

Sourcehanfangyuan4396/text-card-skills

Added on2026-03-31

NPX Install

npx skill4agent add hanfangyuan4396/text-card-skills html-to-image-render

SKILL.md Content (Chinese)

View Translation Comparison →

HTML to Image

When the task is to render local

.html

files into images via the remote

html2image

API, use this skill.

Workflow

Read the content of the HTML file from disk.
If necessary, check the interface conventions in
```
references/html-to-image-api.md
```
first.
Run
```
scripts/render-html-to-image.ts
```
, passing in the input HTML path and output image path.
Confirm that the generated image file has been saved to the target location.

Script Description

The built-in script will complete the following tasks:

Read HTML files in UTF-8 encoding

Call

POST https://html2image.hanfangyuan.cn/api/html2image

Decode the returned
```
image_base64
```
Write the image to local disk

Example:

bash

npx -y tsx skills/html-to-image-render/scripts/render-html-to-image.ts \
  --input ./demo/card.html \
  --output ./out/card.png \
  --element-id card \
  --image-type png

Running this script depends on the availability of

npx

on the local machine, and temporarily executes TypeScript files via

npx -y tsx

.

tsx

is usually downloaded on the first run.

Parameter Description

Required Parameters

```
--input
```
: Path of the input local HTML file.
```
--output
```
: Path of the output image file.

Optional Parameters

```
--element-id
```
: The id of the element to be captured, pass the original id value without
```
#
```
.
```
--image-type
```
: Supports
```
png
```
and
```
jpeg
```
.
```
--device-scale-factor
```
: Device pixel ratio, the higher the value, the clearer the image, but the larger the image size usually is.
```
--viewport-width
```
/
```
--viewport-height
```
: Render viewport size.
```
--render-wait-ms
```
: Extra waiting time before taking a screenshot, suitable for waiting for asynchronous resources such as fonts and images.
```
--element-padding
```
: When
```
--element-id
```
is specified, the extra margin added to the screenshot area, the default value is
```
0
```
.

Notes

The running environment requires available
```
npx
```
.
If image resources are used in HTML, publicly accessible image links are required, and local image paths are not supported.
The output file extension should be consistent with
```
--image-type
```
.
Pay attention to whether the size of the actual screenshot area can fully accommodate the target HTML. Especially when the width and height of the card are larger than the default viewport, you must explicitly adjust
```
--viewport-width
```
and
```
--viewport-height
```
to avoid cropped or incomplete screenshots.
Adjust the viewport and waiting time parameters only when the default rendering result does not meet the requirements; but if the design size of the HTML itself is larger than the default viewport, you should first adjust the viewport to be no smaller than the size of the target element.
If the interface returns
```
400
```
, usually the element corresponding to
```
element_id
```
does not exist.
If the interface returns
```
422
```
, usually the parameter range is invalid.