satori

网页代码一键变高清图,放大不糊,不用截图

Vercel 开源的高性能 HTML/CSS 转 SVG 渲染库,无需浏览器即可在服务端将网页元素渲染为矢量图,常用于生成社交媒体卡片、OG 封面与自定义图片,轻量高效、易于集成。

开源 free 图像生成
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 13967
维护状态 活跃
是否开源
定价模式 free

项目数据

分类图像生成
开发团队vercel
所属国家
定价模式free
价格说明开源库,免费使用,提供在线演示页面(og-playground),无付费版本。
访问状态
是否开源
开源协议MPL-2.0
主要语言TypeScript
技术栈/模型css,image,image-generation,image-generator,jsx,opengraph-images,satori,svg,vercel
GitHub 星标★ 13967
30天Star增速
HF 下载量
上线时间2022-01-27 00:00:00
最近更新2026-09-22 00:00:00
维护状态活跃
中文支持
访问方式
移动端支持
综合评分
收录时间2026-08-09
浏览次数35

使用教程

难度:入门 约 10 分钟 部署方式:库/依赖 4 步

⚠ 该项目 README 未提供完整安装说明,以下步骤为通用流程,请以官方文档为准。

环境要求

  • Node.js >= 16(浏览器和 Web Workers 也可直接运行)
  • 支持 JSX 的构建/运行环境(Satori 接受 JSX 语法)
  • 至少一个字体文件,以 Buffer/ArrayBuffer 形式提供

安装与启动步骤

  1. 1安装 satori

    README 示例中从 'satori' 包导入,因此在项目里安装同名 npm 包即可(README 未直接给出安装命令,此为按包名推断)。

    npm install satori
  2. 2读取字体数据

    用 Node.js 的 fs 或 fetch 把字体读成 Buffer/ArrayBuffer,赋值给 fonts[].data,否则无法渲染文字。

  3. 3编写渲染代码

    用 JSX 描述要渲染的元素,调用 satori 并传入宽高与字体配置,JSX 必须是纯的、无状态的元素。

    import satori from 'satori'
    
    const svg = await satori(
      
    hello, world
    , { width: 600, height: 400, fonts: [ { name: 'Roboto', data: robotoArrayBuffer, weight: 400, style: 'normal', }, ], }, )
  4. 4取出 SVG 结果

    satori 返回 SVG 字符串,形如 '',可直接使用或落盘保存。

关键配置

配置项必填说明示例
width输出 SVG 的宽度(像素)600
height输出 SVG 的高度(像素)400
fonts字体配置数组,用于文字排版[{ name: 'Roboto', data: robotoArrayBuffer, weight: 400, sty
fonts[].name字体名称,供样式引用Roboto
fonts[].data字体二进制数据,Buffer 或 ArrayBufferrobotoArrayBuffer
fonts[].weight字重400

如何确认成功

调用后返回的字符串以 '' 等节点,即渲染成功。

常见问题

Q:Satori 能在哪些环境运行?

A:可直接用于浏览器、Node.js(>= 16)和 Web Workers。其底层 WASM 依赖以 base64 字符串打包,在运行时加载。

Q:怎样生成 PNG(如 OG 图、社交卡片)?

A:README 建议参考 Vercel 的 Open Graph Image Generation 文档与 Next.js 的示例;Satori 本身输出的是 SVG 字符串。

Q:Cloudflare Workers 等无法动态加载 WASM 怎么办?

A:README 提到可使用 Standalone Build(独立构建版本)来规避动态加载 WASM 的限制。

注意事项

  • Satori 只接受纯的、无状态的 JSX 元素
  • Node.js 版本需 >= 16
  • 字体必须显式以 Buffer/ArrayBuffer 形式提供,README 未给出安装命令,安装步骤为按包名推断

核心亮点

  • 将 HTML/CSS 直接转换为 SVG,无需浏览器或 DOM,渲染性能高
  • 基于 JSX 语法编写样式,与 React 生态无缝集成,开发体验好
  • 支持 Open Graph 图片生成,被 Vercel 官方用于 OG 图服务,生产环境验证充分

不足之处

  • 对复杂 CSS 特性(如 flexbox 部分布局、伪元素)支持有限,高级样式需变通
  • 文档/社区待观察

适用场景

  • 动态生成社交媒体分享卡片(Open Graph 图片)
  • 服务端渲染 SVG 用于图表、海报等静态图形输出
  • 在无头环境中批量生成图片,替代 Puppeteer 截图方案

替代项目

sharp、resvg-js、Puppeteer

项目介绍

satori 是图像领域的开源项目,由 vercel 开发,2022 年首次发布。

在全站 13,014 个收录项目中,它的 GitHub 星标数(13,967)位列前 4%,在图像分类的 837 个项目里位列前 1%。

近 44 天,它的 GitHub 星标从 13,754 增加到 13,967,净增 213。

项目目前处于活跃维护状态,最近一次代码更新于 2026-09-22。开源库,免费使用,提供在线演示页面(og-playground),无付费版本。从国内网络环境看,当前已无法正常访问。

它主要面向的使用场景是:动态生成社交媒体分享卡片(OpenGraph图片)。同类可对比的替代方案包括 sharp、resvg-js、Puppeteer。

上一篇:pytorch-CycleGAN-and-pix2pix

下一篇:CycleGAN

同类项目推荐

satori 开源

网页代码一键变高清图,放大不糊,不用截图

Enlightened library to convert HTML and CSS to SVG

★ 13967 2026-08-09
C2GAN 开源

用关键点精准控制图像生成,让AI画出你想要的结构

[ACM MM 2019 Oral] Cycle In Cycle Generative Adversarial Networks for Keypoint-Guide···

★ 70 2026-08-09
ComfyUI 开源

像搭积木一样连节点,生图流程自己搭

The most powerful and modular diffusion model GUI, api and backend with a graph/node···

★ 134493 2026-08-09