workers-og

workers-og

专为 Cloudflare Workers 环境优化的 og:image(社交卡片)生成器

workers-og 是专为 Cloudflare Workers 环境优化的 og:image(社交卡片)生成器。这个快速、无浏览器依赖的工具利用 Vercel 的 Satori 引擎,支持简单 HTML 输入并通过 HTMLRewriter 解析为 React 元素对象。它提供类似 @vercel/og 的简洁 API,在边缘高效运行,为开发者带来灵活、高性能的社交图像生成方案。

Cloudflare WorkersOG Image GeneratorSatori边缘计算图像生成Github开源项目

Cloudflare Workers OG 图像生成器

使用 Vercel 的 Satori 引擎,并感谢 @vercel/og 的灵感启发。

这是一个快速、无浏览器(不使用 Puppeteer)且能在边缘运行的 og:image(社交卡片)生成器。

该包专为 Cloudflare Workers 设计(但也可在其他地方使用),其简单的 API 灵感来自 @vercel/og

@vercel/og 的区别

@vercel/og 专为 Vercel 的边缘运行时设计,而 workers-og 专为 Cloudflare Workers 设计。

尽管 Vercel 的边缘运行时基于 Cloudflare Workers,但 WASM 的打包方式不同,导致在 Worker 上使用 @vercel/og 时会出错。

另一个独特功能:虽然 satori(在 @vercel/ogworkers-og 中都使用)接受 React 元素作为输入,但 workers-og 增加了一个功能,允许你编写简单的 HTML,这里会将其解析为类似 React 元素的对象。解析由 HTMLRewriter 处理,它是 Cloudflare Worker 运行时 API 的一部分。

入门

在你的 Worker 项目中安装该包:

npm i workers-og

然后在项目中导入它。API 与 @vercel/og 非常相似。

import { ImageResponse } from "workers-og";

Worker 上的使用示例:

import { ImageResponse } from "workers-og"; export default { async fetch( request: Request, env: Env, ctx: ExecutionContext ): Promise<Response> { const params = new URLSearchParams(new URL(request.url).search); const title = params.get("title") || "Lorem ipsum"; const html = ` <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; font-family: sans-serif; background: #160f29"> <div style="display: flex; width: 100vw; padding: 40px; color: white;"> <h1 style="font-size: 60px; font-weight: 600; margin: 0; font-family: 'Bitter'; font-weight: 500">${title}</h1> </div> </div> `; return new ImageResponse(html, { width: 1200, height: 630, }); }, };