自动化 OG 图像：从手动设计到 API 驱动生成

2024-12-07 22:48:44 编辑：抖狐科技来源：摘自互联网

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

从手动创建 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<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 美元）

主要经验教训

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

图像生成策略
- 预热缓存以获取可预测的内容
- 实施故障后备
- 首先优化模板渲染
资源管理
- 实现请求排队
- 监控内存使用情况
- 积极缓存
错误处理
- 提供后备图像
- 全面记录失败
- 监控生成指标

前进的道路

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

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

简化实施

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

现在您可以：

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

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

分享您的经验

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

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

以上就是自动化 OG 图像：从手动设计到 API 驱动生成的详细内容，更多请关注抖狐科技其它相关文章！

本站文章均为抖狐网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，我们谢绝直接复制和抄袭！感谢...

返回首页上一篇：佳明手表如何配对手机微信功能下一篇：philips是啥牌子

猜你喜欢

我们猜你喜欢

自动化 OG 图像：从手动设计到 API 驱动生成

手动阶段：了解基线

第一步：模板系统

构建api层

实施缓存层

资源优化

集成示例

绩效结果

主要经验教训

前进的道路

简化实施

分享您的经验

猜你喜欢

锚点降临R卡强度及培养

奇迹暖暖怎么分解重构

镇魂街破晓如何快速升级快速升级玩法介绍

归龙潮当前所在位置怎么查看归龙潮当前所在位置查看方法

bios怎么刷宏基

自动化 OG 图像：从手动设计到 API 驱动生成

手动阶段：了解基线

第一步：模板系统

构建api层

实施缓存层

资源优化

集成示例

绩效结果

主要经验教训

前进的道路

简化实施

分享您的经验

猜你喜欢

锚点降临R卡强度及培养

奇迹暖暖怎么分解重构

镇魂街破晓如何快速升级 快速升级玩法介绍

归龙潮当前所在位置怎么查看 归龙潮当前所在位置查看方法

bios怎么刷宏基

镇魂街破晓如何快速升级快速升级玩法介绍

归龙潮当前所在位置怎么查看归龙潮当前所在位置查看方法