👩💻 Join our community of thousands of amazing developers!
OG 這裡的目的是要編譯時期靜態產生 OG image，也就是封面圖，為什麼不用 @vercel/og 在需要的時候在 edge runtime 上產生呢？我就喜歡弄成靜態的 selenium 我想要程式化的產生圖片，根據提供的資訊替換標題、附標題、標籤等資訊，首先想到的就是 react 產出網頁截圖，當然不是人工截圖，是用 selenium 這樣的自動化工具，之前看過保哥一篇文章介紹這樣的操作，但是有個問題是我只是想產一張圖片還開一個瀏覽器是不是太癰腫了，無論是時間上或是記憶體開銷上。 Satori satori 是 @vercel/og 背後使用的函式庫，把 jsx 輸出成 svg，vercel 為什麼選擇 svg 當作輸出目標其實不難想像，畢竟 svg 和 html 其實都是標籤形式，比起直接輸出成 png，svg 看起來有機會多了，於是我開始從 satori 開始。首先是 GitHub 上的範例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // api.jsx import satori from 'satori' ...