剪藏#剪藏#计算机低手
一个基于 Next.js 和 Puppeteer 的 Markdown 转图片服务，支持 Docker 部署和 API 集成
2025 年 8 月 10 日 约 1 分钟
一、简介
-
• 基于 Next.js 和 Puppeteer（Chromium 浏览器引擎渲染） 技术开发实现，可以快速将 Markdown 文本渲染生成好看的图片
-
• 支持本地Docker部署，也可以在Railway、Render、Fly.io等平台一键快速部署
-
• 提供API接口，可以通过接口调用的方式实现 Markdown 转图片
-
• 开源地址参考：https://github.com/wxingheng/markdown-to-image-serve
-
• 该工具的工作原理可以参考下图：
二、安装
-
• 提前安装好Docker、docker-compose软件运行环境
-
• 新建docker-compose.yml配置文件，内容如下：
JAVASCRIPT
version: '3'
services:
markdown-to-image-serve:
image: wxingheng/markdown-to-image-serve:latest
#image: ghcr.io/luxizai/markdown-to-image-serve:latest #官方镜像存在NEXT_PUBLIC_BASE_URL不生效问题时可以参考这个镜像
ports:
- "3000:3000"
environment:
- NODE_ENV=production
- NEXT_PUBLIC_BASE_URL=http://localhost:3000
volumes:
# 只挂载必要的目录，不挂载源代码（下面是生成的图片保存的目录）
- ./public/uploads/posters:/tmp/uploads/posters- • 配置完，直接一键启动，命令如下：
JAVASCRIPT
docker-compose up -d正常启动截图如下
三、使用
-
• 直接访问在线页面，直接查看渲染效果，访问：http://ip:3000/
-
• 调用接口实现markdown转图片
JAVASCRIPT
POST: http://localhost:3000/api/generatePosterImage
参数(json):
{
"markdown": "string", // 必需：Markdown 内容
"header": "string", // 可选：页眉文本
"footer": "string", // 可选：页脚文本
"logo": "string", // 可选：logo图片URL
"theme": "string" // 可选：主题名称,支持：SpringGradientWave（默认）,blue,pink,purple,green,yellow,gray,red,indigo
}
返回（json）:
{
"url": "http://localhost:3000/api/images/poster-1754744661906.png"
}使用postman请求示例截图如下：
访问生成的图片，效果如下：
四、总结
-
• 这是一个不错的markdown转图片的小工具，在很多需要快速批量生成图片的场景都有应用价值
-
• 安装使用方便，支持Docker一键部署，提供API接口，易于集成到第三方系统
-
• 代码开源，可以根据自己的需要进行二开，调整生成图片的样式、效果等
推荐一下个人网站（本文内容如有错漏只会在个人博客更新）：
