• OG Image Generation – Vercel Docs
  • GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
  • Vercel OG Image Playground

---

커스텀 폰트 사용 시, 배포 중 Provided Edge Function is too large 에러가 발생할 경우 로컬 파일로 사용하지말고 fetch로 해당 폰트를 가져온다.¹²

---

Footnotes

1. https://github.com/cbcruk/oz/commit/0cb90b558cca8bf97bfcc0b36914447845131ab7#diff-ea54c769db531913b015e15682e5b3f4364de740cc7d6c1cb2c8ee2a9ce77379L9-R14 ↩

2. https://vercel.com/docs/concepts/functions/edge-functions/limitations#code-size-limit ↩

import sharp from 'sharp'
import fg from 'fast-glob'

const entries = await fg('./**/*.png')

for (const entry of entries) {
  const trimmedBuffer = await sharp(entry).trim().toBuffer()
  const trimmedImage = sharp(trimmedBuffer)
  const trimmedMetadata = await trimmedImage.metadata()

  trimmedImage
    .resize({
      width: Math.round(trimmedMetadata.width / 2),
      height: Math.round(trimmedMetadata.height / 2),
    })
    .png()
    .toFile('output.png')
}

offset(top, left)값, 이미지 사이즈 설정으로 crop 구현이 가능하다

sharp('img.png')
  .extract({
    left: 50,
    top: 50, 
    width: 200, 
    height: 400
  })

---

• resize
• extract

• 이미지 압축 기본 설정값 참조: mozjpeg(75), pngquant([75, 85])¹

---

Footnotes

1. https://github.com/antonreshetov/image-optimizer/blob/master/src/main/store/module/app.js#L32-L53 ↩

이미지 저장¹

• 페이지에서 JavaScript를 통해 이미지 추출
  • 캔버스에서 이미지 추출
  • 서버에서 이미지 가져오기
• DevTools 프로토콜을 사용하여 이미지 추출

const tree = await page._client.send('Page.getResourceTree')

for (const resource of tree.frameTree.resources) {
  const { content } = await page._client.send(
    'Page.getResourceContent',
    { frameId: String(page.mainFrame()._id), url: resource.url },
  )
  const contentBuffer = Buffer.from(content, 'base64')
}

page.on('response', async (response) => {
  const url = response.url()
  const buffer = await response.buffer()
})

Footnotes

1. Saving Images from a Headless Browser ↩