banner-generator.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import fs from 'fs';
import { createCanvas } from 'canvas'

export default (req: NextApiRequest, res: NextApiResponse) => {
    const width = 1200
    const height = 630

    const canvas = createCanvas(width, height)
    const context = canvas.getContext('2d')

    context.fillStyle = '#000'
    context.fillRect(0, 0, width, height)

    context.font = 'bold 70pt Menlo'
    context.textAlign = 'center'
    context.textBaseline = 'top'
    context.fillStyle = '#3574d4'

    const text = 'Hello, World!'

    const textWidth = context.measureText(text).width
    context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
    context.fillStyle = '#fff'
    context.fillText(text, 600, 170)
    context.fillStyle = '#fff'
    context.font = 'bold 30pt Menlo'
    context.fillText('fmontes.com', 600, 530)
    const buffer = canvas.toBuffer('image/png')

    res.end(buffer)
}