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/og 和 workers-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,
    });
  },
};