一個(gè)純前端實(shí)現(xiàn)的文字轉(zhuǎn)圖片應(yīng)用，您可以通過(guò)編輯器輸入文本和圖片，使用預(yù)設(shè)的 CSS 模板樣式，快速生成預(yù)覽，并導(dǎo)出為圖片。

適合微信公眾號(hào)長(zhǎng)圖推文以及小紅書、Instagram 等圖片社交媒體貼文制作。

如何自定義自己的模版和主題

• 快速文字轉(zhuǎn)圖片，大幅提高內(nèi)容創(chuàng)作效率
• 內(nèi)置多種模版和主題色，更多模版還在開(kāi)發(fā)中
• 固定布局編輯器，無(wú)需考慮復(fù)雜的排版問(wèn)題
• 實(shí)時(shí)預(yù)覽生成的長(zhǎng)圖
• 導(dǎo)出為長(zhǎng)圖和多張切圖
• 開(kāi)放格式，導(dǎo)出主題為 .oneimg json 文件
• 正文編輯器支持加粗、斜體、下劃線和列表等格式

oneimgai

• 前端： Next.js、tiptap 編輯器、tailwindcss、shadcn/ui
• 圖片處理：html2canvas, UPNG
• 數(shù)據(jù)庫(kù)：IndexedDB (本地存儲(chǔ))

# 安裝依賴
pnpm install 

# 啟動(dòng)項(xiàng)目
pnpm dev

你可以直接使用我已經(jīng)構(gòu)建好的鏡像來(lái)運(yùn)行

docker run -d -t -p 3000:3000 \
--name=oneimg \
--restart=always \
byodian/oneimg:latest

或者，如果您愿意，也可以自己手動(dòng)編譯。

#下載代碼
git clone https://github.com/byodian/oneimg.git

#docker 編譯
cd oneimg/
docker build -t oneimg:v1 .

#啟動(dòng)服務(wù)
docker run -d -t -p 3000:3000 --name oneimg --restart=always oneimg:v1

最后，打開(kāi)你的瀏覽器訪問(wèn)服務(wù)的地址 http://localhost:3000 即可

1. 打開(kāi)應(yīng)用后，首先創(chuàng)建主題
2. 選擇預(yù)設(shè)的 CSS 樣式模板
3. 使用編輯器輸入內(nèi)容，實(shí)時(shí)預(yù)覽生成的圖片樣式
4. 點(diǎn)擊導(dǎo)出按鈕，生成 PNG 格式的圖片并下載。

我們歡迎各類貢獻(xiàn)。如果你有新的功能或改進(jìn)，歡迎提交 PR：

1. Fork 本項(xiàng)目。
2. 創(chuàng)建新的分支 (git checkout -b feature/your-feature)。
3. 提交修改 (git commit -m 'Add some feature')。
4. 推送到分支 (git push origin feature/your-feature)。
5. 創(chuàng)建 Pull Request。

本項(xiàng)目基于 MIT license 開(kāi)源。

支持我