从手动创建 opengraph 图像到实现自动化 api 驱动系统的旅程代表了不断增长的 web 应用程序的关键演变。今天，我将分享我如何在 gleam.so 转变这一流程，从单独的 figma 设计转向处理数千张图像的自动化系统。
手动阶段：了解基线
最初，像许多开发人员一样，我手动创建了 og 图像：
// early implementation
const getogimage = (postid: string) => {
return `/images/og/${postid}.png`; // manually created in figma
};
此过程通常涉及：
- 打开每张新图像的figma
- 调整文本和元素
- 导出为正确的尺寸
- 上传并链接图像
每张图像的平均时间：15-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 => {
const svg = rendertemplate(template, content);
return converttoimage(svg);
};
这将每个图像的创建时间减少到 5 分钟，但仍然需要手动干预。
构建api层
下一个演变引入了适当的 api：
// 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 });
}
}
实施缓存层
性能优化需要多个缓存层：
class ogcache {
private readonly memory = new map();
private readonly redis: redis;
private readonly cdn: cdnstorage;
async getimage(key: string): promise {
// 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;
}
}
资源优化
处理增加的负载需要仔细的资源管理：
class resourcemanager {
private readonly queue: queue;
private readonly maxconcurrent = 50;
private activejobs = 0;
async processrequest(params: generationparams): promise {
if (this.activejobs >= this.maxconcurrent) {
return this.queue.add(params);
}
this.activejobs++;
try {
return await this.generateimage(params);
} finally {
this.activejobs--;
}
}
}
集成示例
以下是这一切在 next.js 应用程序中的组合方式：
// 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 (
);
}
绩效结果
自动化系统取得了重大改进：
营销型企业网站源码响应式界面1.0.1
下载
这几年企业营销型网站成为PC端风靡一时的设计主流，主要特点就是首页长度比较长，首页展示的内容量非常大，通过对首页的大量渲染，突出企业优势、产品服务优势等众多信息，让用户在页面停留时间更久，对企业的映像更加深刻，从而达到营销的目的。但是对于大部分的营销型网站来说，一个最大的弱点就是在手机上的用户体验都比较差，而这又恰好是自适应网站所具备的优势，自适应网站能够自动检测访问者浏览设备的分辨率，从而根据访
- 生成时间：
- 缓存命中率：95%
- 错误率：
- cpu 使用率：之前实施的 15%
- 每张图像的成本：0.0001 美元（体力劳动成本约为 5 美元）
主要经验教训
通过这次自动化之旅，出现了一些重要的见解：
-
图像生成策略
- 预热缓存以获取可预测的内容
- 实施故障后备
- 首先优化模板渲染
-
资源管理
- 实现请求排队
- 监控内存使用情况
- 积极缓存
-
错误处理
- 提供后备图像
- 全面记录失败
- 监控生成指标
前进的道路
og图像自动化的未来在于：
- 人工智能增强的模板选择
- 动态内容优化
- 预测性缓存变暖
- 实时性能调整
简化实施
虽然构建自定义解决方案可以提供宝贵的学习经验，但它需要大量的开发和维护工作。这就是我构建 gleam.so 的原因，它将整个自动化堆栈作为服务提供。
现在您可以：
- 视觉设计模板
- 免费预览所有选项
- 通过 api 生成图像（针对终身用户的公开 beta 测试）
- 专注于您的核心产品
终生访问 75% 折扣即将结束 ✨
分享您的经验
您是否已自动化生成 og 图像？您面临哪些挑战？在评论中分享您的经验！
让 opengraph 发挥作用系列的一部分。关注以获取更多 web 开发见解！
