首页 > 文章 > 前端

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

来源：dev.to

时间：2024-12-13 13:01:14 442浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《自动化 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>
  );
}