the-jailor/wwwroot/core/welcome/nameCardCreator.js

import sharp from "sharp";
import {Logger} from "../logging/logger.js";
import fs from "fs";

export class NameCardCreator {

    constructor(templatePath) {
        this.templatePath = templatePath;
        this.fontPath = "./wwwroot/assets/fonts/Fredoka/Fredoka-VariableFont_wdth,wght.ttf";
        this.fontData = this.loadFontData();
    }

    /**
     * Loads the template file into a sharp instance
     * @returns {sharp.Sharp} sharp image object
     */
    loadTemplate() {
        return sharp(this.templatePath);
    }

    /**
     * Combines a template image with a user avatar and saves it
     * @param avatarPath {string}
     * @param name {string}
     * @returns {Promise<sharp.OutputInfo>} resulting image buffer
     */
    async getWelcomeCard(avatarPath, name) {
        try{

            const template = this.loadTemplate();

            const avatar = await this.handleAvatar(avatarPath);
            const messageBuffer = await this.getMessageBuffer(`Hello ${name}!`);

            const result = await template
                .composite([
                    { input: avatar, top: 215, left: 275 },
                    { input: messageBuffer, top: 400, left: 1300 }
                ])
                .toFile("namecard.png")

            console.log("✅ Welcome card created: welcome-card.png");
            return result;
        } catch(err) {
            console.log(err);
            await Logger.error("Unable to create name card", err);
        }
    }

    /**
     *
     * @param avatarPath
     * @returns {Promise<Buffer<ArrayBufferLike>>}
     */
    async handleAvatar(avatarPath) {
        const avatarSize = 670;
        const borderSize = 8;
        const radius = avatarSize / 2;
        const totalSize = avatarSize + borderSize * 2;

        const avatarBuffer = await sharp(avatarPath)
            .resize(avatarSize, avatarSize, { fit: "cover" })
            .png()
            .toBuffer();

        const maskSvg = Buffer.from(`
            <svg width="${avatarSize}" height="${avatarSize}" xmlns="http://www.w3.org/2000/svg">
              <circle cx="${radius}" cy="${radius}" r="${radius}" fill="white"/>
            </svg>
        `);

        const roundedAvatar = await sharp(avatarBuffer)
            .composite([{ input: maskSvg, blend: "dest-in" }])
            .png()
            .toBuffer();

        const roundedBorder = Buffer.from(`
          <svg width="${totalSize}" height="${totalSize}" xmlns="http://www.w3.org/2000/svg">
            <circle
              cx="${totalSize / 2}"
              cy="${totalSize / 2}"
              r="${radius + borderSize / 2}"
              stroke="#ffffff"
              stroke-width="${borderSize}"
              fill="none"
            />
          </svg>
        `)

        return await sharp({
            create: {
                width: totalSize,
                height: totalSize,
                channels: 4,
                background: "#0000"
            }
        }).composite([
                { input: roundedAvatar, top: 0, left: 0 },
                { input: roundedBorder, top: borderSize, left: borderSize }
        ])
            .png()
            .toBuffer();
    }

    async getMessageBuffer(message){
        const messageSvg = this.getMessageSvg(message);
        return Buffer.from(messageSvg, "utf-8");
    }

    /**
     *
     * @param message {string}
     * @returns {string}
     */
    getMessageSvg(message) {
        const safeMessage =
            message
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

        return `
          <svg width="1500" height="200" xmlns="http://www.w3.org/2000/svg">
            <style>
              @font-face {
                font-family: 'Fredoka';
                src: url(data:font/truetype;charset=utf-8;base64,${this.fontData}) format('truetype');
              }
              .title {
                font-family: 'Fredoka', sans-serif;
                fill: #ede6e6;
                font-size: 80px;
                font-weight: bold;
                dominant-baseline: middle;
              }
            </style>
            
            <text x="50%" y="50%" text-anchor="middle" class="title">${safeMessage}</text>
          </svg>
        `;
    }

    loadFontData(){
        return fs.readFileSync(this.fontPath).toString("base64");
    }
}