🎨 TweetCanvas (推文卡片工场)

专为自媒体创作者打造的 100% 免费开源推文卡片生成器 · X 爆款雷达 · 像素级防搬运过审引擎

在线体验 • English README • 个人主页 • 意见反馈

---

💡 为什么需要 TweetCanvas？

在抖音、小红书、视频号、TikTok 等主流社交平台上，海外科技/商业/认知推文截图是吸粉最快、互动率最高的爆款形式之一。

然而，创作者经常面临以下痛点：

1. 排版难看且耗时：直接截图模糊、文字拥挤、背景杂乱；
2. 多语种翻译麻烦：需要手动用 DeepL/ChatGPT 翻译后再打字排版；
3. 平台判定搬运/限制加热：直接发原图常被平台 OCR 和色彩指纹识别为“低质搬运”，无法投放 DOU+/薯条；
4. 找不到好选题：天天发愁不知道海外大 V 最近又发了什么高赞推文；
5. 付费工具按月收割：市面上的工具动辄按月收费，限制导出数量。

TweetCanvas 是一个 100% 免费、纯前端离线可用、零 API 成本 的全能推文卡片工场，开箱即用，专为自媒体破局而生！

---

⚡ 核心功能特性

1. 🔗 推文链接一键解析 & 免费自动翻译

• 粘贴即解析：支持任意 x.com / twitter.com 推文链接，毫秒级提取真实作者、官方蓝 V、真实头像、点赞转评数据。
• 免 API 中英即时互译：纯前端内置多通道翻译引擎，外文推文一键自动翻译为通顺、地道的高质感中文，支持一键切换中文/原文。

2. 🛡️ 4 重像素级防搬运去重与壁纸特征打散引擎（投流加热神器）

• 高频不可见白噪点注入 ($\pm 2 \sim \pm 4$)：彻底重置图像 MD5/SHA256 与 DCT 频域系数，阻断平台的感知哈希（pHash/aHash/dHash）比对。
• 壁纸图库动态打散：针对 Picsum/Unsplash 等被发过成千上万次的开源壁纸，导出时自动注入 104%~109% 随机微构图裁切、焦点平移、色彩直方图微抖动与自然暗角光影，彻底破坏平台特征库比对。
• LSB 隐形数字防碰撞指纹：在最低有效位注入动态时间戳与唯一防重散列码。

3. 🔥 100% 零成本「X 爆款推文雷达」

• 7 大垂直赛道精选：涵盖 🤖 科技&AI、🚀 独立出海、💰 商业认知、⚡ 极简工具、😂 程序员神梗、🌐 Web3 等赛道。
• 顶级顶流大 V 实时收录：收录 Sam Altman、Andrej Karpathy、Pieter Levels、Naval、Elon Musk 等高赞推文，中英对照 + 爆款心理学拆解。
• 本地智能三维二创改写：无需配置 API Key，一键生成「🔥 反常识冲击版」、「📌 极简干货清单版」、「💡 深度共鸣版」。

4. 📐 主流平台比例 & 智能自适应排版

• 多平台比例：9:16（抖音/小红书/Reels 竖屏）、3:4（小红书图文最佳）、1:1（朋友圈/Instagram）、自适应比例。
• 字数自适应边距 (Auto Padding)：无论短推文还是长文，文字永远舒展优雅，绝不拥挤。
• 丰富字体排版：思源黑体、思源宋体、霞鹜文楷、Inter、JetBrains Mono 等。

5. ✏️ 荧光划线与手绘红圈/箭头标注

• 关键词高亮：荧光黄、薄荷绿、樱花粉一键高亮划线。
• 手绘标注系统：自由添加手绘红圈、椭圆、胶囊框、手绘弯曲红箭头、重要标签，让平台判定为高权重人工二创作品。
• 创作者个性水印：支持自定义账号水印署名与半透明防盗标记。

---

🛠️ 技术栈 (Tech Stack)

• 核心框架：React 19 + TypeScript 5.8
• 构建工具：Vite 6.2 + TailwindCSS 4.0
• 动效库：Motion (Framer Motion)
• 图像合成引擎：html-to-image + 原生 HTML5 Canvas 2D 像素处理
• 图标系统：Lucide React
• 部署支持：Cloudflare Pages / Vercel / Netlify / Docker

---

🚀 快速开始 (Quick Start)

环境要求

• Node.js >= 18.0.0
• npm / pnpm / yarn

本地运行

# 1. 克隆项目到本地
git clone https://github.com/cheak1988/tweet-canvas.git
cd tweet-canvas

# 2. 安装依赖
npm install

# 3. 启动本地开发服务
npm run dev

打开浏览器访问：http://localhost:5173 即可开始创作！

生产打包

npm run build

打包产物位于 dist/ 目录，可直接托管在任何静态 Web 服务器上。

---

☁️ 一键云端部署 (Deploy)

本项目为纯静态单页应用（SPA），无需复杂的 Node.js 后端服务器，可直接免费托管在全球 CDN 上：

部署到 Cloudflare Pages

1. Fork 本仓库到你的 GitHub；
2. 登录 Cloudflare Dashboard，进入 Workers & Pages -> Create application -> Pages；
3. 连接 GitHub 仓库，设置构建命令：
   • Framework preset: Vite
   • Build command: npm run build
   • Build output directory: dist
4. 点击 Save and Deploy，1分钟内全球上线！

---

💡 抖音 / 小红书 100% 投流加热过审实操秘诀

1. 加手绘圈画或红箭头：使用顶栏「+ 添加标注」，在截图核心数字或标题上圈一下或加箭头，系统直接认定为高权重人工二创。
2. 开启创作者水印：在「设计 -> 水印署名」填入您的账号名，平台判定为原创作品。
3. 更换差异化背景：使用渐变色或毛玻璃背景，配合内置的「壁纸去重引擎」打破全网同款壁纸检测。
4. 文案微调/双语重排：如果原文是纯英文爆款截图，配合推文卡片模式加入中文观点或翻译，OCR 审查秒级绿灯过审。

---

🤝 参与贡献 (Contributing)

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交您的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到远程分支 (git push origin feature/AmazingFeature)
5. 新建 Pull Request

---

📄 开源协议 (License)

本项目基于 MIT License 协议完全开源，免费可商用，请保留原作者署名。

---

👨‍💻 关于作者

我是 红叔，独立创作者与开发者。
不装，不卷，只把踩过的坑和真实的经验做成好用的工具分享给大家。

🌐 个人网站：hongshu.me
💬 微信：yueorg（欢迎加微信交流自媒体与出海变现）
⚡ 大模型充值/中转：apirss.com

⭐ 如果这个项目帮到了你，请给个 Star 支持一下！ ⭐