一个基于 Next.js 和 Puppeteer 的 Markdown 转图片服务，支持 Docker 部署和 API 集成

一、简介

• 基于 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配置文件，内容如下：

  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

• 配置完，直接一键启动，命令如下：

  docker-compose up -d

  正常启动截图如下
  

三、使用

• 直接访问在线页面，直接查看渲染效果，访问：http://ip:3000/
  

• 调用接口实现markdown转图片

  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接口，易于集成到第三方系统
• 代码开源，可以根据自己的需要进行二开，调整生成图片的样式、效果等