mcpField
H
html-to-image-render

html-to-image-render

github.com/hanfangyuan4396创意与媒体1137 次安装30 周前更新
代码仓库

关于 html-to-image-render

html-to-image-render 是将本地 HTML 文件通过远程 html2image API 渲染为图片的技能，适用于需要把网页内容输出为图片的任务。它通过脚本读取文件、调用 API 并保存解码后的图片。

主要功能

  1. 01读取本地 HTML 文件
  2. 02调用 html2image API 渲染
  3. 03将 Base64 图片写入磁盘
  4. 04指定元素、格式与视口
  5. 05设置等待时间和截图边距

适用场景

  1. 01将 HTML 卡片导出为 PNG
  2. 02调整视口以完整截取内容
  3. 03等待异步资源加载后截图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hanfangyuan4396/text-card-skills --skill html-to-image-render

安装后在 Claude Code 中输入/html-to-image-render确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/
example.html
references/
html-to-image-api.md
scripts/
render-html-to-image.ts

详细介绍

来自项目 README

HTML 转图片

当任务是把本地 .html 文件通过远端 html2image API 渲染成图片时，使用这个 skill。

工作流

  1. 从磁盘读取 HTML 文件内容。
  2. 如有必要，先查看 references/html-to-image-api.md 中的接口约定。
  3. 运行 scripts/render-html-to-image.ts，传入输入 HTML 路径和输出图片路径。
  4. 确认生成的图片文件已经落到目标位置。

脚本说明

内置脚本会完成这些事情：

  • 以 UTF-8 读取 HTML 文件
  • 调用 POST https://html2image.hanfangyuan.cn/api/html2image
  • 解码返回的 image_base64
  • 把图片写入本地磁盘

示例：

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

执行这个脚本依赖本机可用的 npx，并通过 npx -y tsx 临时执行 TypeScript 文件。首次运行时通常会下载 tsx。

参数说明

必选参数
  • --input：输入的本地 HTML 文件路径。
  • --output：输出图片文件路径。
可选参数
  • --element-id：要截图的元素 id，传原始 id 值，不要带 #。
  • --image-type：支持 png 和 jpeg。
  • --device-scale-factor：设备像素比，越大越清晰，但图片通常也更大。
  • --viewport-width / --viewport-height：渲染视口尺寸。
  • --render-wait-ms：截图前额外等待时间，适合等待字体、图片等异步资源。
  • --element-padding：当指定 --element-id 时，为截图区域额外增加的边距，默认值为 0。

注意事项

  • 运行环境需要可用的 npx。
  • 如果 HTML 中使用图片资源，需要使用公网可访问的图片链接，不支持本地图片路径。
  • 输出文件扩展名应与 --image-type 保持一致。
  • 要注意实际截图区域的尺寸是否能完整容纳目标 HTML。尤其当卡片宽高大于默认视口时，必须显式调整 --viewport-width 和 --viewport-height，避免截图被裁切或图片不完整。
  • 只有在默认渲染结果不满足需求时，再调整视口和等待时间参数；但如果 HTML 的设计尺寸本身就大于默认视口，应该优先先把视口调到不小于目标元素尺寸。
  • 如果接口返回 400，通常是 element_id 对应元素不存在。
  • 如果接口返回 422，通常是参数范围不合法。

评论

支持 Markdown