How I made it easier to generate beautiful cards for my Discord bot

说明与用途

创建了 discord-card-canvas 库，用于为 Discord 机器人生成美观的卡片，分离逻辑与设计，简化维护。

问题

Generating multiple styled cards (rank, welcome, level‑up) for a Discord bot required writing custom canvas logic each time, making design changes hard to test and deploy.

结果

The bot can now generate high‑quality, customizable cards quickly, separating design from logic and simplifying maintenance.

工作流

• 1. Install discord-card-canvas via npm. 2. Prepare avatar image and font files. 3. Load fonts with loadFonts(). 4. Create a builder function (e.g., createRankCard) that accepts nickname, avatarURL, level, rank, xp, requiredXP. 5. In a separate script, encode avatar.png to base64 and call createRankCard with demo data. 6. Write the resulting image buffer to a PNG file. 7. Use the same builder in Discord command handlers to generate cards on demand.

证据

Drawing a single card with Canvas is fairly straightforward. Maintaining several types of cards means handling avatars, fonts, long names, backgrounds, and user settings.

来源

I wanted a tool that could handle this without making me write the drawing logic from scratch each time.

来源

Now I can change card designs and check the results separately from the bot. That makes small changes noticeably easier.

来源