titlemaker

一个命令行工具，用于在图片上渲染像素风格的 3D 标题。生成带有立体深度、描边和阴影效果的文字叠加层。

安装

npm install -g titlemaker

使用

在图片上渲染标题

titlemaker render <image> <title> [options]

参数说明：

| 标志 | 说明 | 默认值 | | -------------- | ------------------ | -------------------- | | -o, --output | 输出文件路径 | {input}-cover.png | | -f, --font | 自定义字体文件路径 | AlimamaShuHeiTi-Bold | | -s, --size | 字体大小 | 180 | | -T, --top | 上方小标题文字 | — | | -B, --bottom | 下方小标题文字 | — | | --width | 输出宽度 (px) | 1920 | | --height | 输出高度 (px) | 1920 |

示例：

titlemaker render photo.jpg "你好世界" -s 96 -o cover.png
titlemaker render photo.jpg "主标题" -T "上方文字" -B "下方文字" -o cover.png

预览所有内置字体

titlemaker test-fonts <image> [options]

参数说明：

| 标志 | 说明 | 默认值 | | -------------- | ------------- | -------------------- | | -o, --output | 输出文件路径 | test-fonts.png | | -s, --size | 字体大小 | 48 | | -t, --text | 示例文字 | 你好世界 Hello 123 | | --width | 输出宽度 (px) | 1920 |

视觉效果

• 3D 立体深度 — 多层渐变堆叠，营造立体纵深感
• 黑色描边 — 8 方向描边，在任何背景上都清晰可见
• 白色字面 — 明亮白色文字，带半透明阴影
• 自动缩放 — 描边宽度和深度随字体大小自动调整

内置字体

• ZCOOL QingKe HuangYou（默认，中英文支持）
• ZCOOL KuaiLe
• Alibaba PuHuiTi
• Alibaba DingTalk JinBuTi
• Press Start 2P
• zpix
• ……等更多字体

通过 -f 参数可使用自定义字体（.ttf、.woff、.woff2）。

开发

vp install   # 安装依赖
vp dev       # 开发模式运行
vp test      # 运行测试
vp check     # 格式化、lint、类型检查
vp build     # 生产构建

技术栈

TypeScript, satori, @resvg/resvg-js, sharp, citty