没错，我们终于有了一个不需要 Puppeteer、也不用启动浏览器就能生成图像的轻量级利器 —— Satori。它由 Vercel 出品，专门用于解决社交卡片图、OG 图渲染这类“高频痛点”。这篇文章将带你全面了解这个项目的功能、用法以及实践中的注意事项。
项目简介
Satori 是一个可以将 HTML 和 CSS（更准确地说是 React JSX）直接渲染成 SVG 图像的开源库，由 Vercel 团队开发。
它非常适用于在服务端、无头环境或边缘计算场景（如 Vercel Edge Function、Cloudflare Workers）中生成 Open Graph 图像、社交媒体卡片等视觉内容。
它的核心理念是：无需浏览器，无需截图。你提供 JSX，它返回 SVG。这个库开箱即用，并且对字体、emoji、国际化乃至 Flexbox 布局都提供了良好的支持。
项目特点
Satori 的巧妙之处在于它摒弃了依赖 headless 浏览器的传统路径，选择了一条更轻量、更高效的 SVG 原生渲染之路。其主要特点包括：
- JSX 驱动：直接传入 React JSX 或类似的结构体即可生成图像，API 设计简单直观，如同编写前端组件。
- 字体内嵌：支持 TTF、OTF、WOFF 等字体格式，并自动将字体转换为 SVG Path，确保图像在任何环境下都能正确显示文字。
- 图片支持：支持
<img> 标签，可以通过 base64 或 ArrayBuffer 传入图片数据，完美适配服务器端渲染场景。
- 超轻量，无浏览器依赖：只需 Node.js 或 Web Worker 环境即可运行，也支持手动加载 WASM 文件以适应更严格的环境。
- Emoji 自定义：可以集成 Twemoji 等外部资源来替换原生 Emoji，获得更统一、稳定的渲染效果。
- 国际化支持：通过
lang 属性控制文字渲染方式，例如正确处理日文字体“骨”在不同字体下的显示差异。
- Debug 模式：调试时可渲染出元素边框，方便开发者检查和调整布局。
使用方式
看了代码示例，你会更快理解它的简洁：
import satori from 'satori'
const svg = await satori(
<div style={{ color: 'black' }}>Hello, Satori</div>,
{
width: 600,
height: 400,
fonts: [
{
name: 'Roboto',
data: robotoArrayBuffer, // 字体文件的ArrayBuffer
weight: 400,
style: 'normal',
},
],
}
)
执行后，svg 变量就是一个干净的 SVG 字符串，你可以直接用于网页嵌入，或作为图像转码、生成 PDF 的中间层。
没有 JSX？也能用！
即使你的环境不支持 JSX 语法，Satori 也允许你传入一个类似 React 元素的对象结构：
await satori({
type: 'div',
props: {
style: { color: 'red' },
children: 'Hi',
}
}, options)
支持的 CSS 和 HTML 特性
虽然 Satori 的目标不是实现一个完整的浏览器，但它对 CSS 和 HTML 的支持已经足够覆盖大多数实用场景：
- 布局：底层使用 Yoga 引擎（与 React Native 相同），完整支持 Flexbox 布局。
- 样式：支持颜色、边框、边距、字体、阴影、背景图、文本装饰等常用属性。
- 字体：字体需通过 ArrayBuffer 传入，可配置多个字重（weight）与样式（style）。
- 不支持的内容：例如
<script> 标签、动态的 React API（如 useEffect）、z-index、3D 变换、calc() 函数等目前暂不支持。
高级用法一箩筐
- 手动加载 WASM：适用于对包体积敏感的 Edge Function 或 Worker 环境，可以配合
satori/standalone 使用。
- 关闭字体嵌入：通过配置，可以让文字用
<text> 标签而非 <path> 渲染，这样生成的 SVG 更便于后期编辑。
- 调节像素对齐：通过
pointScaleFactor 参数，可以提升在高分辨率设备上渲染的清晰度。
- 动态加载资源：可以自定义逻辑，在字体或 emoji 缺失时动态加载外部资源，实现灵活的 fallback 策略。
适用场景
- 生成博客、社交媒体封面图（Open Graph 图）
- 在 Serverless / Edge API 中动态生成图像卡片
- 作为自动化 UI 截图工具的轻量级替代方案
- 充当图像合成管道中的中间层（SVG → PNG/JPG/PDF）
谁在用？
Satori 目前已被超过 4万 个项目使用，GitHub Star 数量突破 12.8k。它不仅被 Vercel 自家的 Next.js 等平台用于生成 OG 图，也被许多内容平台和开发者采纳。其稳定性、轻量性和可扩展性得到了广泛验证。
小结
Satori 并非“又一个图像生成器”，它将前端组件化的开发体验带入了图像生成领域。用写 JSX 的方式描述视觉，用 SVG 作为输出媒介，使得在服务端生成高质量视觉内容变得前所未有的轻量、快速和优雅。
如果你正在为动态生成 OG 图像、文章封面图，或在 Serverless 环境中处理图像渲染而寻找方案，Satori 绝对值得你深入尝试。想了解更多前沿的前端与 Serverless 实践，欢迎来 云栈社区 交流探讨。
项目地址
https://github.com/vercel/satori
发表于 5 天前
|
查看: 23|
回复: 0
