标签导航：

自动化 og 图像：从手动设计到 api 驱动生成

从手动创建 opengraph 图像到实现自动化 api 驱动系统的旅程代表了不断增长的 web 应用程序的关键演变。今天，我将分享我如何在 gleam.so 转变这一流程，从单独的 figma 设计转向处理数千张图像的自动化系统。

手动阶段：了解基线

最初，像许多开发人员一样，我手动创建了 og 图像：

// early implementation
const getogimage = (postid: string) => {
  return `/images/og/${postid}.png`;  // manually created in figma
};

此过程通常涉及：

  1. 打开每张新图像的figma
  2. 调整文本和元素
  3. 导出为正确的尺寸
  4. 上传并链接图像

第一步：模板系统

第一个自动化步骤涉及创建可重用模板：

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：

// 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<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;
  }
}

资源优化

处理增加的负载需要仔细的资源管理：

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 应用程序中的组合方式：

// 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 美元）

主要经验教训

通过这次自动化之旅，出现了一些重要的见解：

  1. 图像生成策略

    • 预热缓存以获取可预测的内容
    • 实施故障后备
    • 首先优化模板渲染

  2. 资源管理

    • 实现请求排队
    • 监控内存使用情况
    • 积极缓存

  3. 错误处理

    • 提供后备图像
    • 全面记录失败
    • 监控生成指标

前进的道路

og图像自动化的未来在于：

  1. 人工智能增强的模板选择
  2. 动态内容优化
  3. 预测性缓存变暖
  4. 实时性能调整

简化实施

虽然构建自定义解决方案可以提供宝贵的学习经验，但它需要大量的开发和维护工作。这就是我构建 gleam.so 的原因，它将整个自动化堆栈作为服务提供。

现在您可以：

  • 视觉设计模板
  • 免费预览所有选项
  • 通过 api 生成图像（针对终身用户的公开 beta 测试）
  • 专注于您的核心产品

终生访问 75% 折扣即将结束 ✨

分享您的经验

您是否已自动化生成 og 图像？您面临哪些挑战？在评论中分享您的经验！

让 opengraph 发挥作用系列的一部分。关注以获取更多 web 开发见解！