小红书引流图生成器

把微信号、QQ 号等联系方式做成一张图片（或 GIF 动图），规避小红书私信里的文字审核，安全地把客户引流到微信。

📖 项目背景、使用场景与制作思路，详见公众号文章：《小红书私信发不出微信号？用这个网站搞定引流》

---

✨ 功能特性

• 微信号 → 图片：输入微信号，实时生成一张带背景的引流图
• GIF 动图：勾选「开启动态效果」即可生成 GIF 动图，更吸睛、更防识别
• 5 种背景样式：干扰线 / Emoji 散点 / 渐变 / 花纹 / 纯色
• 文字特效：渐显 / 蹦出 / 抖动（GIF 模式下生效）
• 字体自定义：抖音美好体（默认）/ 黑体 / 宋体 / 楷体
• 纯前端运行：所有处理都在浏览器本地完成，数据不上传任何服务器
• 完全免费：无需注册、无需登录

🚀 在线体验

👉 https://xhs2wx.pages.dev/

🛠 技术栈

• 纯静态网站（HTML + CSS + 原生 JavaScript），无框架、无构建步骤、无后端
• Canvas 2D 绘图
• gif.js 生成 GIF 动图
• 部署在 Cloudflare Pages

💻 本地运行

直接双击 index.html 用浏览器打开即可使用：

• 文字输入、背景切换、模板套用、保存 PNG 图片 —— 全部正常
• 「复制图片 / 生成 GIF」依赖浏览器安全环境，本地 file:// 打开可能被限制。两种解决方式（任选其一）：
  • 用部署后的 https:// 网址打开，这两个功能全正常
  • 或本地起个小服务：在文件夹里打开终端，运行 python -m http.server 8080，然后访问 http://localhost:8080

☁️ 部署到 Cloudflare Pages（免费）

方式一：直接拖文件夹上传（最简单）

1. 把整个项目文件夹打包成 zip
2. 打开 https://pages.cloudflare.com ，注册 / 登录 Cloudflare（免费）
3. Create a project → 选择 Direct upload（直接上传）
4. 把 zip 拖进去，等几秒
5. 部署完成后得到 xxx.pages.dev 网址，别人打开即用

方式二：连 Git 仓库（适合持续更新）

1. 在 GitHub / Gitee 新建一个空仓库，把本项目推送上去
2. Cloudflare Pages → Create a project → 连接仓库
3. 构建设置：Framework preset 选 None，Build command 留空，Build output directory 填 /
4. 部署后，以后每次推送代码都会自动重新部署

📁 目录结构

xhs-lead-gen/
├── index.html                      # 主页面
├── README.md                       # 项目说明（本文件）
├── LICENSE                         # 开源协议
├── 部署说明.md                      # 更详细的部署指引（小白版）
├── ads.txt                         # AdSense 授权文件
├── sitemap.xml                     # 站点地图
├── robots.txt                      # 爬虫规则
├── google62324575a68acdaf.html    # Google 站点验证文件
├── BingSiteAuth.xml                # 必应站点验证文件
└── assets/
    ├── css/style.css               # 样式（奶油编辑风主题）
    ├── js/
    │   ├── app.js                  # 核心逻辑：画布渲染、预设、导出
    │   ├── owner.js                # 作者公众号位配置
    │   └── lib/
    │       ├── gif.js              # GIF 生成库
    │       └── gif.worker.js       # GIF 生成 Web Worker
    ├── fonts/
    │   └── douyin-sans.ttf         # 抖音美好体（Douyin Sans Bold）
    └── images/
        └── qrcode_for_gh_36468f1b1571_430.jpg  # 作者公众号二维码

📄 开源协议

本项目基于 MIT License 开源，你可以自由使用、修改和分发。