JavaScript >> Javascript 文檔 >  >> React

如何使用 React 生成自己的 OpenGraph 圖像

這篇文章最初發佈在我的個人網站上。

在這篇博文中,我想向您展示如何從您的 React 組件中生成 OpenGraph 圖像。就個人而言,我喜歡這種方法,因為我可以利用我的前端開發技能來生成動態圖像(實際上不僅僅是 OpenGraph 圖像)。

如標題所述,我將使用 React 生成圖像,但該方法可能也可以很容易地轉移到其他前端框架中,所以我希望你也覺得它對你有幫助,儘管你不是 React!

使用木偶/劇作家

這種方法的第一塊基石是使用像 Puppeteer 或 Playwright 這樣的瀏覽器自動化框架。兩者在功能方面和 API 方面都非常相似,因此它們之間應該沒有太多差異。今天我要用Playwright。

上述兩個框架都可用於自動化(無頭)瀏覽器。您可以編寫腳本來導航到特定網站並抓取它們或做其他花哨的事情。對於我們的 OG 圖像的生成,我們正在利用對網站進行截圖的能力。 🙌

查看以下代碼段:

import * as playwright from 'playwright-aws-lambda';

const width = 1200;
const height = 630;

const browser = await playwright.launchChromium({ headless: true });
const page = await browser.newPage({
  viewport: {
    width,
    height,
  },
});

const imageBuffer = await page.screenshot({
  type: 'jpeg',
  clip: {
    x: 0,
    y: 0,
    width,
    height,
  },
});

await browser.close();

通過這幾行我們:

  1. 啟動無頭 chrome 瀏覽器
  2. 使用給定的視口打開一個新選項卡(我選擇 1200x630,因為它是最常見的 og 圖像尺寸)
  3. 截屏 - 您可以在 PNG 或 JPEG 之間進行選擇,使用 JPEG,您甚至可以指定圖像的質量
  4. 關閉瀏覽器

這很整潔,不是嗎?但是,是的,我們現在只是生成一個純白色的 og 圖像 - 那麼我們如何使用 React 來設計我們想要的動態圖像呢? 😄

利用 React 的力量

想像一下,我們有以下組件,我們想用它來渲染我們的 og 圖像:

interface Props {
  title: string;
}

export const OgImage = ({ title }: Props) => {
  return <div style={{ color: 'red', fontSize: '60px' }}>{title}</div>;
};

這是一個非常簡單的組件,非常適合我們的示例。它將標題作為道具並將其呈現為紅色文本。讓我們告訴劇作家我們想把它渲染到我們的頁面上。

首先,我們創建一個 React 組件的實例,將我們想要的標題作為 prop 傳遞:

const el = createElement(OgImage, {
  title: 'This is a test title',
});

然後我們利用 React 服務器端渲染的強大功能。我們將其呈現為靜態 HTML 標記:

const body = renderToStaticMarkup(el);

此外,我們添加了一個實用函數來呈現我們的基本 HTML 結構:

const baseCSS = `*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}`;

const getHtmlData = ({ body }: { body: string }) => {
  const html = `<!DOCTYPE html>
    <head>
    <meta charset="utf-8"><style>${baseCSS}</style>
    </head>
    <body style="display:inline-block">
    ${body}
    </body>
  </html>`;
  return html;
};

現在我們告訴 playwright,在瀏覽器中打開新頁面後,我們生成的 HTML 應該被設置為頁面的內容:

const html = getHtmlData({
  body,
});

await page.setContent(html);

瞧,現在我們正在用 playwright 渲染我們自己的 React 組件並對其進行截圖。 🥳 從這裡開始,您的想像力沒有界限。只需像設置前端應用程序的樣式一樣設置 og 圖像的樣式,並根據需要使用盡可能多的動態參數。

使用 ChakraUI

我喜歡使用 ChakraUI 來設計我的 Web 應用程序。自從我切換到 ChakraUI 後,我永遠不想為我的 React 應用程序設置不同的樣式。因此我也想使用 ChakraUI 來生成我的 og 圖像。

為此,您還需要包含 <ChakraProvider> 進入您的 OgImage 組件,以便您可以訪問所有功能。

將其部署為無服務器功能

基本上,你可以使用這種技術來生成你想要的 React 組件的圖像。例如。作為一個 Node.js 腳本,它使用給定的參數生成一些圖像。但是在這篇博文中,我特別提到了 og 圖像,當機器人抓取您的網站時,這些圖像會被獲取。

我正在使用 Next.js 編寫我的 React 應用程序,我的計劃是在構建我的項目時實際生成這些 og 圖像。 Next.js 為我的博客文章創建靜態站點,我想在創建靜態站點後創建靜態 og 圖像,然後將其用作靜態資產。但是我沒有在 Vercel 上進行這項工作,因為我在構建過程中遇到了內存限制。

因此,我選擇了我想到的次優方法:將其部署為使用動態參數調用的無服務器函數(在我的情況下為 Next.js API 路由)。

它基本上只是一個 GET 調用,它接受我的動態參數,用 playwright 渲染 og 圖像,並將其作為響應返回。這就是我在這里為我的博客文章渲染 og 圖像的方式。 😄

您可以在此處找到此 og 圖像生成的來源。

這就是這些 og 圖像所在的 API/正在動態生成的 API。

結論

我希望這篇博文對你有所幫助,也許它可以激發一些關於如何使用這種技術來生成一些很棒的圖像的想法。如果您還有其他問題,請不要猶豫,在 Twitter 上給我發私信,乾杯!


Tutorial JavaScript 教程
  1. Scrollspy、功能、Mouseaway 模態 |模塊星期一 40

  2. 反應原生 101

  3. 使用 Tailwind CSS 示例反應響應式導航欄菜單

  4. 搭建 React 環境

  5. JavaScript 救了我的命

  6. AWS 使用 TypeScript 和 Hooks 放大 GraphQL 操作 - 第 2 部分 [自定義 Hooks]

  7. TypeScript 中的省略輔助類型

  1. 正則表達式替換多個字符串數組javascript

  2. 在 Node.js 中使用 RxJS 進行反應式編程和可觀察序列

  3. 自定義元素或:我如何學會停止擔心並熱愛 Web 組件

  4. 文件結構如何影響編程模型

  5. 無法使用 Web Share API 在我的 React typescript App 中共享文件

  6. PostgreSQL 致那些連也做不到的人,第 1 部分

  7. 點擊“顯示更多”按鈕後如何發布新內容?

  1. TC39/proposal-pipeline-operator Hack-style |> hijacks Grouping operator ( )

  2. 命令行應用程序:使用 puppeteer 抓取 dev.to

  3. 如何製作 DevTools 擴展

  4. 瀏覽 JavaScript 🤷‍♂️⁉️