Skip to content

一个基于 Next.js 和 Puppeteer 的 Markdown 转图片服务,支持 Docker 部署和 API 集成。A Markdown to Image Service based on Next.js and Puppeteer, supporting Vercel deployment and API integration.

License

Notifications You must be signed in to change notification settings

wxingheng/markdown-to-image-serve

Repository files navigation

Markdown To Image Serve

license PRs Welcome Node Version Issues

基于 Next.js 和 Puppeteer 的 Markdown 转图片服务,支持 Docker 一键部署和 API 调用

一个将 Markdown 内容转换为精美图片的服务,提供开箱即用的 API 接口,支持 Docker 快速部署和二次开发

简体中文 | English

🎯 项目简介

Markdown To Image Serve 是一个开箱即用的 Markdown 转图片 API 服务。你可以:

  • 🚀 一键部署 - 支持 Docker Compose 一键部署
  • 🔄 API 集成 - 提供简单易用的 RESTful API 接口
  • 🎨 自定义样式 - 支持自定义页眉页脚和样式模板
  • 📱 响应式设计 - 自适应不同尺寸的图片输出
  • 🌐 多平台支持 - 支持 Docker 等多种部署方式
  • 🔒 安全可靠 - 支持图片防盗链和访问控制

🌟 核心功能

  • 📝 将 Markdown 文本转换为精美图片
  • 🎨 支持自定义主题和样式
  • 📊 支持代码高亮和表格渲染
  • 🖼️ 支持自定义页眉页脚
  • 📱 自适应不同设备尺寸
  • 🔄 支持批量转换功能
  • 📦 提供完整的 API 接口

快速使用

在线服务(基于Vercel, 可能很慢,且不稳定。建议自行Docker部署)

访问我们的在线服务,立即体验:

本地开发

  1. 克隆项目
git clone https://github.com/your-username/markdown-to-image-serve.git
cd markdown-to-image-serve
  1. 安装依赖
pnpm install
  1. 配置环境变量 创建 .env 文件:
NEXT_PUBLIC_BASE_URL=http://localhost:3000
CHROME_PATH=/path/to/your/chrome  # Chrome 浏览器路径
  1. 启动开发服务器
pnpm dev

Chrome 路径配置指南

根据不同操作系统,Chrome 路径获取方式如下:

macOS:

ls -l /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome

Linux:

which google-chrome
#
which chromium

Windows:

Get-Command chrome | Select-Object -ExpandProperty Definition
# 或访问 chrome://version/ 查看"可执行文件路径"

Docker 部署

使用 Docker Compose(推荐 推荐 推荐):

docker-compose up -d
docker compose build --no-cache 

注意:

  1. 如果x86 架构 (Linux 平台, Windows 平台, Mac Intel 平台), 请将 docker-compose.yml 中的 platform 设置为 linux/x86
  2. 如果 Apple Silicon 平台, 请将 docker-compose.yml 中的 platform 设置为 linux/amd64

或使用 Docker 直接部署:

docker build -t markdown-to-image-serve .
docker run -p 3000:3000 markdown-to-image-serve

📚 API 文档

生成海报 (POST /api/generatePoster)

请求参数:

{
  markdown: string;       // Markdown 内容
  header?: string;       // 可选:页眉文本
  footer?: string;       // 可选:页脚文本
  theme?: 'light' | 'dark'; // 可选:主题
  width?: number;        // 可选:图片宽度
  height?: number;       // 可选:图片高度
}

示例请求:

curl -X POST 'http://localhost:3000/api/generatePoster' \
  -H 'Content-Type: application/json' \
  -d '{
    "markdown": "# Hello World\n\nThis is a test. \n # 你好,世界!",
    "header": "My Header",
    "footer": "My Footer"
  }'

生成图片 (POST /api/generatePosterImage)

请求参数:

{
  markdown: string;      // Markdown 内容
  theme?: string;       // 可选:主题
  width?: number;       // 可选:图片宽度
}

🛠 开发计划

  • Docker 部署支持
  • 自定义主题功能
  • 图片压缩优化
  • 批量生成功能
  • 中文字体优化
  • 自定义模板系统
  • API 访问控制

🤝 贡献指南

  1. Fork 本仓库
  2. 创建特性分支:git checkout -b feature/AmazingFeature
  3. 提交改动:git commit -m 'Add some AmazingFeature'
  4. 推送分支:git push origin feature/AmazingFeature
  5. 提交 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

致谢

感谢 markdown-to-image 项目的启发。

如果这个项目对你有帮助,欢迎 star 支持! ⭐️

About

一个基于 Next.js 和 Puppeteer 的 Markdown 转图片服务,支持 Docker 部署和 API 集成。A Markdown to Image Service based on Next.js and Puppeteer, supporting Vercel deployment and API integration.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published