快速将图文转为长图应用， Next.js 开源分享

[byj66]

oneimg

一个纯前端实现的长图生成器应用，您可以通过编辑器输入文本和图片，使用预设的 CSS 模板样式，快速生成预览，并导出为图片格式。

特性

• 图文转长图
• 内置多种模版和主题色，更多模版还在开发中
• 固定布局编辑器，无需考虑复杂的排版问题
• 实时预览生成的长图
• 导出为长图和多张切图
• 开放格式，导出主题为 .oneimg json 文件
• 正文编辑器支持加粗、斜体、下划线和列表等格式

使用案例

微信公众号长图推文：oneimg 应用介绍

可下载主题文件作导入到 oneimg 应用，查看效果。

技术栈

• 前端：Next.js 、tiptap 编辑器、tailwindcss 、shadcn/ui
• 图片处理：html-to-image, UPNG
• 数据库：IndexedDB (本地存储)

源代码和预览地址

• 在线地址：oneimgai
• 仓库：https://github.com/byodian/oneimg

如果大家感兴趣欢迎 Star 和贡献代码。

[falcon05]

iOS 上 safari 转不了图片，preview 是空白的，下载一个 zip ，也全是空白的内容，感觉不像我期待的文字转图片应用。

[byj66]

@falcon05 移动端端还有点问题，电脑上试试

[zhangkui]

[byj66]

@zhangkui 收到

[wjup]

图片要是能插入到正文随意位置就更好了

[byj66]

@wjup 后面会迭代，把这个功能加进去。