一个基于 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请求示例截图如下:
    图片[1]-一个基于 Next.js 和 Puppeteer 的 Markdown 转图片服务,支持 Docker 部署和 API 集成-副业网
    访问生成的图片,效果如下:

四、总结

  • 这是一个不错的markdown转图片的小工具,在很多需要快速批量生成图片的场景都有应用价值
  • 安装使用方便,支持Docker一键部署,提供API接口,易于集成到第三方系统
  • 代码开源,可以根据自己的需要进行二开,调整生成图片的样式、效果等
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容