从手动创建 opengraph 图像到实现自动化 api 驱动系统的旅程代表了不断增长的 web 应用程序的关键演变。今天，我将分享我如何在 gleam.so 转变这一流程，从单独的 figma 设计转向处理数千张图像的自动化系统。
手动阶段：了解基线
最初，像许多开发人员一样，我手动创建了 og 图像：
1
2
3
4
// early implementation
const getogimage = (postid: string) => {
return `/images/og/${postid}.png`; // manually created in figma
};
此过程通常涉及：
打开每张新图像的figma 调整文本和元素 导出为正确的尺寸 上传并链接图像每张图像的平均时间：15-20 分钟。
第一步：模板系统
第一个自动化步骤涉及创建可重用模板：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface ogtemplate {
layout: string;
styles: {
title: textstyle;
description?: textstyle;
background: backgroundstyle;
};
dimensions: {
width: number;
height: number;
};
}
const generatefromtemplate = async (
template: ogtemplate,
content: content
): promise<buffer> => {
const svg = rendertemplate(template, content);
return converttoimage(svg);
};
这将每个图像的创建时间减少到 5 分钟，但仍然需要手动干预。
构建api层
下一个演变引入了适当的 api：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// api/og/route.ts
import { imageresponse } from @vercel/og;
import { gettemplate } from @/lib/templates;
export const config = {
runtime: edge,
};
export async function get(request: request) {
try {
const { searchparams } = new url(request.url);
const template = gettemplate(searchparams.get(template) || default);
const content = {
title: searchparams.get(title),
description: searchparams.get(description),
};
const imageresponse = new imageresponse(
rendertemplate(template, content),
{
width: 1200,
height: 630,
}
);
return imageresponse;
} catch (error) {
console.error(og generation failed:, error);
return new response(failed to generate image, { status: 500 });
}
}
实施缓存层
性能优化需要多个缓存层：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class ogcache {
private readonly memory = new map<string, buffer>();
private readonly redis: redis;
private readonly cdn: cdnstorage;
async getimage(key: string): promise<buffer | null> {
// memory cache
if (this.memory.has(key)) {
return this.memory.get(key);
}
// redis cache
const redisresult = await this.redis.get(key);
if (redisresult) {
this.memory.set(key, redisresult);
return redisresult;
}
// cdn cache
const cdnresult = await this.cdn.get(key);
if (cdnresult) {
await this.warmcache(key, cdnresult);
return cdnresult;
}
return null;
}
}
资源优化
处理增加的负载需要仔细的资源管理：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class resourcemanager {
private readonly queue: queue;
private readonly maxconcurrent = 50;
private activejobs = 0;
async processrequest(params: generationparams): promise<buffer> {
if (this.activejobs >= this.maxconcurrent) {
return this.queue.add(params);
}
this.activejobs++;
try {
return await this.generateimage(params);
} finally {
this.activejobs--;
}
}
}
集成示例
以下是这一切在 next.js 应用程序中的组合方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// components/OGImage.tsx
export function OGImage({ title, description, template = default }) {
const ogUrl = useMemo(() => {
const params = new URLSearchParams({
title,
description,
template,
});
return `/api/og?${params.toString()}`;
}, [title, description, template]);
return (
<Head>
<meta property="og:image" content={ogUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</Head>
);
}
绩效结果
自动化系统取得了重大改进：
生成时间： 缓存命中率：95% 错误率： cpu 使用率：之前实施的 15% 每张图像的成本：0.0001 美元（体力劳动成本约为 5 美元）主要经验教训
图像生成策略
预热缓存以获取可预测的内容 实施故障后备 首先优化模板渲染资源管理
实现请求排队 监控内存使用情况 积极缓存错误处理
提供后备图像 全面记录失败 监控生成指标前进的道路
og图像自动化的未来在于：
人工智能增强的模板选择 动态内容优化 预测性缓存变暖 实时性能调整简化实施
虽然构建自定义解决方案可以提供宝贵的学习经验，但它需要大量的开发和维护工作。这就是我构建 gleam.so 的原因，它将整个自动化堆栈作为服务提供。
现在您可以：
视觉设计模板 免费预览所有选项 通过 api 生成图像（针对终身用户的公开 beta 测试） 专注于您的核心产品终生访问 75% 折扣即将结束 ✨
分享您的经验
您是否已自动化生成 og 图像？您面临哪些挑战？在评论中分享您的经验！
让 opengraph 发挥作用系列的一部分。关注以获取更多 web 开发见解！
以上就是自动化 OG 图像：从手动设计到 API 驱动生成的详细内容，更多请关注php中文网其它相关文章！