social-card-renderlisted

# 社交卡片图渲染（HTML → CDP 截图 → 批量导出） ## 为什么不用 PIL 直接画 需要中文大字、圆角卡片、渐变遮罩、多级排版时，PIL 的 `ImageDraw` 要手算每个元素的坐标， 改一个字就要重算全版。**用 HTML + CSS 排，浏览器帮你做布局**，改文案只改 HTML。 代价只是多一步"截图"，而这一步有稳定流程。 ## 目录约定 ``` <项目>/ <某个静态目录>/ ← http server 的根，卡片和素材都要在这里面能访问到 source/ ← 素材（图片等） cards.html ← 卡片定义，每张一个 <section class="card" id="cN"> scripts/render.py ← 起服务 + 起浏览器 + 调 render.js scripts/render.js ← CDP 协议，按 .card 截图 shots/ ← 需要嵌入卡片的原始截图（可选） final/ ← 渲染出的 PNG（1080×1440 @2x） ready/ ← 后处理（缩放 + JPG + 按发布顺序命名） ``` ## 卡片规范（小红书） | 项 | 值 | |---|---| | 画布 | `1080 × 1440`（3:4，小红书占屏最大） | | 渲染倍数 | `deviceScaleFactor:1` + `clip.scale:2` → 输出 2160×2880 | | 成品尺寸 | 缩到 **1440×1920**，JPG q90（每张 250–400 KB） | | 安全边距 | 左右各 70px，上 60–80px | | 中文粗体 | `"Microsoft YaHei"` + `font-weight:900`（Windows 自带，无需引字体） | **配色经验**（暖色调内容）：奶油底 `#FDF6E8`、墨字 `#2E2A24`、强调砖红 `#B05C34`、 卡片描边 `#EADFC8`、次要文字 `#6B5F4E`。同一套配色贯穿全部卡片，视觉才成套。 ## 用法 ```bash python scripts/render.py --root <http根目录> --html <相对root的html> --out <输出目录> ``` 例： ```bash python scripts/render.py --root "D:/proj" --html "cards.html" --out "D:/proj/final" ``` `--root` 决定 http server 根，`--html` 是相对 root 的路径。卡片里的图片用**相对该 html 的路径**引用。 ## 🔴 关键坑（都踩过） 1. **不要在自己的脚本里 spawn 浏览器再连 CDP。** 实测在 Windows 上这样会静默挂死（fetch `/json` 轮询超时，进程不死也不出结果）。 **正确做法：Python 负责起 http server + Popen 浏览器并轮询 `/json/version` 确认就绪， Node 只做 CDP 协议**。`render.py` 就是这个分工。