hi.ts

import { NextApiRequest, NextApiResponse } from "next";
import { createCanvas, loadImage, CanvasRenderingContext2D } from "canvas";
import sharp from "sharp";

function wrapText(context: CanvasRenderingContext2D, text: string, x: number, y:number, maxWidth:number, lineHeight:number, color: string) {
    var words = text.split(' ');
    var line = '';

    context.fillStyle = color;
    for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        }
        else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
    return y + lineHeight;
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const canvas = createCanvas(1640, 924);
    const ctx = canvas.getContext("2d");

    const image = await loadImage("https://i.imgur.com/yGMCNco.png");

    ctx.drawImage(image, 0, 0, 1640, 924);

    ctx.font = "bold 40px Arial";
    ctx.fillStyle = "#000000";
    ctx.textAlign = 'center';

    ctx.fillText('Leader Media and Events', 814, 425, 1640);

    ctx.font = "46px Arial";
    ctx.fillStyle = "#000000";
    ctx.textAlign = "center";

    ctx.fillText("Le Thi Phuong Thao", 814, 500, 1640);

    ctx.font = "30px Arial";
    //wrapText(ctx, "Is hereby Awarded this certificate of appreciation for successfully serving as a Code MeLy Core Team Member At Code MeLy Community for FY23", 814, 580, 1340, 30);
    let x = 814;
    let y = 580;
    y = wrapText(ctx, "Is hereby Awarded this certificate of appreciation for successfully serving as a", 814, y, 1340, 35, "#000000");
    y = wrapText(ctx, "Code MeLy Core Team Member", 814, y, 1340, 35, "#ff8a38");
    wrapText(ctx, "At Code MeLy Community for FY23", 814, y, 1340, 35, "#000000");
    ctx.textAlign = "left";

    ctx.font = "bold 40px Arial";
    ctx.fillText("69696969", 398, 830)




    const buffer = canvas.toBuffer("image/png");

    const sharpBuffer = await sharp(buffer).sharpen().toBuffer();

    res.setHeader("Content-Type", "image/png");
    res.send(sharpBuffer);
}