生成OG图片

使用 Deno 和 Supabase 边缘函数生成 Open Graph 图片。在 GitHub 上查看。

代码实现

创建一个 handler.tsx 文件，使用 React 构建 OG 图片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'https://esm.sh/react@18.2.0'import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'export default function handler(req: Request) {  return new ImageResponse(    (      <div        style={{          width: '100%',          height: '100%',          display: 'flex',          alignItems: 'center',          justifyContent: 'center',          fontSize: 128,          background: 'lavender',        }}      >        Hello OG Image!      </div>    )  )}

创建一个 index.ts 文件来处理传入请求并执行 handler：

1
2
3
4
5
import handler from './handler.tsx'console.log('Hello from og-image Function!')Deno.serve(handler)