Sticker Maker — 自定义文字贴图

在 Project Sekai 和 Arcaea 角色贴图上叠加自定义文字。基于 Next.js 服务端 Canvas 渲染。

参考https://github.com/lgc-NB2Dev/nonebot-plugin-meme-stickers -参考Python代码用nextjs重写生成表情包

带前端和api

前端演示

快速开始

可部署在vercel，点击下面的按钮一键部署:

或在服务器上部署

# 安装依赖
npm install

# 启动开发服务器
npm run dev

打开 http://localhost:3000。

API用法

必要基础参数

[apiurl]/api/overlay-text?type=[表情包类型]&path=[arcpjsk-hub仓库的图片地址]&key=[要显示的文字]

假设你部署后的apiurl为http://localhost:3000 示例

https://localhost:3000/api/overlay-text?bg=bdc3c7&bg2=2c3e50&type=arcaea&path=https://raw.githubusercontent.com/kamicry/arcpjsk-hub/main/arcaea/Ayu/ayu.png&key=你好世界！

功能

• 26 个 PJSK 角色、20 个 Arcaea 角色，数百种表情变体
• 角色网格按名称分组，带角色色圆点和变体数量标记
• 自定义文字，支持多行（/+/ 或 \n 换行）
• 实时预览 — 输入即时生成贴图
• 两种字体 — YurukaStd 和 上首方糖体
• 调色盘 — 原生颜色选择器 + 手动输入 Hex + 清除按钮
• 背景 — 单色、渐变（双色）、透明
• 下载 PNG — 保存生成的贴图
• 复制链接 — 直接分享贴图 URL

技术栈

• Next.js 16（App Router）
• Tailwind CSS v4
• @napi-rs/canvas — 服务端图片渲染
• arcpjsk-hub — 角色配置数据

API

GET [apiurl]/api/overlay-text

生成一张在角色图片上叠加文字的 PNG 图片。

参数	类型	说明
path	string	角色图片的 URL（必要）
key	string	要叠加的文字（/+/ 或 \n 换行）（必要）
type	string	pjsk 或 arcaea（默认 pjsk）（必要）
character	string	角色配置中的 ID （可选）
font	string	YurukaStd 或 SSFangTangTi（默认 YurukaStd）（可选）
bg	string	背景颜色：Hex（#ff0）、w/b/t（白/黑/透明）（可选）
bg2	string	渐变的第二种颜色 （可选）

GET /api/health

健康检查，返回角色配置加载状态。

GET /api/status

列出已注册的 Canvas 字体。

Vercel 部署

内置 vercel.json，包含：

• API 函数 30 秒超时限制
• API 路由 CORS 头
• 预设环境变量

环境变量

参考 .env.local 进行本地覆盖：

变量	默认值
CHARACTERS_URL_PJSK	PJSK characters.json 的 GitHub 地址
CHARACTERS_URL_ARCAEA	Arcaea characters.json 的 GitHub 地址
FONT_YURUKA_URL	YurukaStd 字体远程地址
FONT_SSFANG_URL	上首方糖体远程地址

许可证

MIT

🙏 致谢

• AstrBot — 插件框架
• https://github.com/araea/koishi-plugin-pjsk-pptr -角色配置文件参考
• https://github.com/kamicry/arcpjsk-hub -表情包来源
• https://github.com/lgc-NB2Dev/nonebot-plugin-meme-stickers -参考Python代码用nextjs重写生成表情包