### Install discord-card-canvas Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Install the discord-card-canvas library using npm. ```bash npm install discord-card-canvas ``` -------------------------------- ### Example Usage: Loading Custom Fonts and Building a Rank Card Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Demonstrates loading custom fonts and then using them to configure a `RankCardBuilder`. Fonts must be loaded before card instantiation. ```typescript import { loadFonts, RankCardBuilder } from 'discord-card-canvas'; // Load multiple custom fonts loadFonts([ { path: './fonts/Roboto-Bold.ttf', family: 'Roboto', weight: '700', style: 'normal', }, { path: './fonts/Inter-SemiBold.ttf', family: 'Inter', weight: '600', style: 'normal', }, ]); // Create a rank card using the loaded fonts const rankCard = await new RankCardBuilder({ nicknameText: { content: 'ChampionX', font: 'Roboto', color: '#0CA7FF', size: 42, weight: '700', }, avatarImgURL: 'URL.png', currentLvl: 25, currentRank: 1, currentXP: 5000, requiredXP: 10000, userStatus: 'online', fontDefault: 'Inter', backgroundColor: { background: '#000', bubbles: '#0CA7FF' }, }).build({ objectFit: 'cover' }); fs.writeFileSync('rank-custom-font.png', rankCard.toBuffer()); ``` -------------------------------- ### Create a Blue Rank Card Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Generates a rank card with a blue theme. Saves the image to a file and shows an example of sending it to a Discord channel. ```typescript const canvasRank = await new RankCardBuilder({ currentLvl: 102, currentRank: 563, currentXP: 71032, requiredXP: 95195, backgroundColor: { background: '#070d19', bubbles: '#0ca7ff' }, // backgroundImgURL: 'any_image.png', ( you can also use ) avatarImgURL: 'avatar.jpg', nicknameText: { content: 'xNinja_Catx', font: 'Nunito', color: '#0CA7FF' }, userStatus: 'idle', }).build(); // Saving an image fs.writeFileSync('rank_blue.png', canvasRank.toBuffer()); // Example of sending to a channel channel.send(files: [{ attachment: canvasRank.toBuffer(), name: 'rank.png' }]) ``` -------------------------------- ### Create a Welcome Card (Method Chaining) Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Generates a welcome card using method chaining for setting properties like font, nickname, second text, and avatar. The image is saved to a file. ```typescript const cv = new WelcomeBuilder({ // backgroundImgURL: 'any_image.png', ( you can also use ) fontDefault: 'Inter', nicknameText: { color: '#0CA7FF', content: 'ДобраяKnopKa#2575' }, secondText: { color: '#0CA7FF', content: 'Raccoon Bot Discord' }, avatarImgURL: 'Sad_KnopKa.gif', }).build(); fs.writeFileSync('welcome-1.png', (await cv.build()).toBuffer()); ``` -------------------------------- ### Build and Save Info Card Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Demonstrates how to create an information card with custom background and text, then save it as a PNG file. Requires the InfoCardBuilder class and fs module. ```typescript const canvasInfo = await new InfoCardBuilder({ // backgroundImgURL: 'any_image.png', ( you can also use ) backgroundColor: {background: '#fff', waves: '#0ca7ff'}, mainText: { content: 'INFORMATION' }, }).build(); fs.writeFileSync('info.png', canvasInfo.toBuffer()); ``` -------------------------------- ### Create Custom BaseCardBuilder Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Builds a custom welcome/leave style card with full control over text, colors, and avatar. Use this for detailed card customization. ```typescript import { BaseCardBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Custom base card with all options const customCard = await new BaseCardBuilder({ mainText: { content: 'HELLO', font: 'Roboto', size: 48, weight: '800', color: '#FF0000', }, nicknameText: { content: 'CustomUser', font: 'Roboto', size: 35, weight: '700', color: '#0CA7FF', }, secondText: { content: 'This is a custom card', size: 33, weight: '600', }, backgroundColor: { background: '#FFFFFF', waves: '#0CA7FF' }, avatarImgURL: 'https://example.com/avatar.png', avatarBorderColor: '#0CA7FF', avatarBorderStyle: 'stroke', fontDefault: 'Nunito', colorTextDefault: '#0CA7FF', }).build(); fs.writeFileSync('custom.png', customCard.toBuffer()); ``` ```typescript const imageCard = await new BaseCardBuilder({ backgroundImgURL: 'https://example.com/background.png', overlayOpacity: 0.5, nicknameText: { content: 'Player123', color: '#FFFFFF' }, avatarImgURL: 'https://example.com/avatar.png', }).build({ objectFit: 'cover' }); fs.writeFileSync('image-card.png', imageCard.toBuffer()); ``` -------------------------------- ### Create a Welcome Card with Custom Styling Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Generates a welcome card with custom font and text colors. Ensure the avatar image URL is valid. ```typescript import { WelcomeBuilder, LeaveBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Welcome card with custom styling const welcomeCard = await new WelcomeBuilder({ fontDefault: 'Inter', nicknameText: { color: '#0CA7FF', content: 'NewUser#2575' }, secondText: { color: '#0CA7FF', content: 'Welcome to Our Server!' }, avatarImgURL: 'https://example.com/avatar.png', }).build(); fs.writeFileSync('welcome.png', welcomeCard.toBuffer()); ``` -------------------------------- ### Send Welcome and Rank Cards with Discord.js Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt This snippet demonstrates how to send generated welcome cards upon member joins and rank cards in response to a chat command using Discord.js. Ensure you have the necessary Discord.js intents configured and replace 'YOUR_BOT_TOKEN' with your actual bot token. ```typescript import { Client, GatewayIntentBits, AttachmentBuilder } from 'discord.js'; import { WelcomeBuilder, RankCardBuilder } from 'discord-card-canvas'; const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMembers], }); // Send welcome card when member joins client.on('guildMemberAdd', async (member) => { const welcomeCard = await new WelcomeBuilder({ nicknameText: { content: member.user.tag, color: '#0CA7FF' }, secondText: { content: member.guild.name, color: '#0CA7FF' }, avatarImgURL: member.user.displayAvatarURL({ extension: 'png', size: 256 }), }).build(); const attachment = new AttachmentBuilder(welcomeCard.toBuffer(), { name: 'welcome.png' }); const channel = member.guild.systemChannel; if (channel) { await channel.send({ files: [attachment] }); } }); // Slash command for rank card client.on('interactionCreate', async (interaction) => { if (!interaction.isChatInputCommand() || interaction.commandName !== 'rank') return; const userXP = 5000; // Fetch from database const userLevel = 10; const userRank = 5; const requiredXP = 7500; const rankCard = await new RankCardBuilder({ nicknameText: { content: interaction.user.username }, avatarImgURL: interaction.user.displayAvatarURL({ extension: 'png', size: 256 }), currentLvl: userLevel, currentRank: userRank, currentXP: userXP, requiredXP: requiredXP, userStatus: 'online', }).build(); await interaction.reply({ files: [{ attachment: rankCard.toBuffer(), name: 'rank.png' }], }); }); client.login('YOUR_BOT_TOKEN'); ``` -------------------------------- ### Create a Level-Up Card with Stars Pattern Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Generates a level-up notification card using the default stars pattern. Ensure the avatar image URL is valid. ```typescript import { LevelUpBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Level up card with stars pattern const levelUpCard = await new LevelUpBuilder({ nicknameText: { content: 'Raccoon Bot', font: 'Nunito', color: '#0CA7FF' }, previousLvl: 4, newLvl: 5, avatarImgURL: 'https://example.com/avatar.png', userStatus: 'dnd', backgroundColor: { background: '#070d19', pattern: 'stars', patternColor: '#0CA7FF' }, }).build(); fs.writeFileSync('level-up.png', levelUpCard.toBuffer()); ``` -------------------------------- ### Create InfoCardBuilder Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Generates an information header card, suitable for section dividers or announcements. Supports background images and wave patterns. ```typescript import { InfoCardBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Info card with wave pattern const infoCard = await new InfoCardBuilder({ backgroundColor: { background: '#fff', waves: '#0ca7ff' }, mainText: { content: 'INFORMATION', color: '#0CA7FF', size: 76, weight: '800' }, }).build(); fs.writeFileSync('info.png', infoCard.toBuffer()); ``` ```typescript // Info card with background image const imageInfoCard = await new InfoCardBuilder({ backgroundImgURL: 'https://example.com/header-bg.png', overlayOpacity: 0.4, mainText: { content: 'ANNOUNCEMENTS', color: '#FFFFFF' }, }).build({ objectFit: 'cover' }); fs.writeFileSync('info-image.png', imageInfoCard.toBuffer()); ``` -------------------------------- ### Create a Leave Card Using Method Chaining Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Generates a leave card using method chaining for setting properties like font and second text. The build method is called after all configurations are set. ```typescript import { WelcomeBuilder, LeaveBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Leave card using method chaining const leaveCard = new LeaveBuilder({ nicknameText: { content: 'DepartingUser#1234' }, avatarImgURL: 'https://example.com/avatar.png', }); leaveCard.setFontDefault('Inter'); leaveCard.setSecondText({ content: 'Goodbye from Our Server!' }); fs.writeFileSync('leave.png', (await leaveCard.build()).toBuffer()); ``` -------------------------------- ### Create a Basic Rank Card Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Generates a basic rank card with a blue theme and default settings. Ensure the avatar image URL is valid. ```typescript import { RankCardBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Basic rank card with blue theme const rankCard = await new RankCardBuilder({ currentLvl: 102, currentRank: 563, currentXP: 71032, requiredXP: 95195, backgroundColor: { background: '#070d19', bubbles: '#0ca7ff' }, avatarImgURL: 'https://example.com/avatar.png', nicknameText: { content: 'xNinja_Catx', font: 'Nunito', color: '#0CA7FF' }, userStatus: 'idle', }).build(); fs.writeFileSync('rank.png', rankCard.toBuffer()); ``` -------------------------------- ### Color Conversion Utilities Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Provides functions for converting between HEX and RGBA color formats. Useful for dynamic color handling. ```typescript import { hexToRgbA, rgbToHex } from 'discord-card-canvas'; // Convert HEX to RGBA with custom opacity const rgbaColor = hexToRgbA('#0CA7FF', 0.5); console.log(rgbaColor); // Output: "rgba(12,167,255,0.5)" // Convert 3-digit HEX const shortHex = hexToRgbA('#FFF', 1); console.log(shortHex); // Output: "rgba(255,255,255,1)" ``` ```typescript // Convert RGB/RGBA to HEX const hexColor = rgbToHex('rgb(12, 167, 255)'); console.log(hexColor); // Output: "#0ca7ff" const hexFromRgba = rgbToHex('rgba(255, 72, 45, 0.8)'); console.log(hexFromRgba); // Output: "#ff482d" ``` -------------------------------- ### Create a Leave Card (Setter Methods) Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Generates a leave card using setter methods to configure properties such as font, second text, nickname, and avatar. The resulting image is saved. ```typescript const cv = new LeaveBuilder({ nicknameText: { content: 'ДобраяKnopKa#2575' }, avatarImgURL: 'Sad_KnopKa.gif', }); cv.setFontDefault('Inter'); cv.setSecondText({ content: 'Raccoon Bot Discord' }); fs.writeFileSync('welcome-2.png', (await cv.build()).toBuffer()); ``` -------------------------------- ### Create a Level-Up Card with Bubbles Pattern and Custom Text Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Generates a level-up card with a bubbles pattern, custom text, and specific color schemes for a distinct appearance. The avatar background color is also customized. ```typescript import { LevelUpBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Level up card with bubbles pattern and custom text const orangeLevelUp = await new LevelUpBuilder({ nicknameText: { content: 'Raccoon Developer', font: 'Nunito', color: '#f48b2d' }, previousLvl: 24, newLvl: 25, avatarImgURL: 'https://example.com/avatar.png', userStatus: 'idle', colorTextDefault: '#f48b2d', avatarBackgroundColor: '#fbbf60', backgroundColor: { background: '#1a1a2e', pattern: 'bubbles', patternColor: '#f48b2d' }, levelUpText: { content: 'LEVEL UP', color: '#d4782a' }, }).build(); fs.writeFileSync('level-up-orange.png', orangeLevelUp.toBuffer()); ``` -------------------------------- ### Loading Multiple Fonts with loadFonts Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md The `loadFonts` function simplifies the process by allowing you to register all fonts in a single call. Fonts must be registered before creating any card that uses them. Typically, load fonts at the entry point of your application. ```APIDOC ## Loading Multiple Fonts with `loadFonts` ### Description If you have multiple fonts to load, the `loadFonts` function simplifies the process by allowing you to register all fonts in a single call. ### Method `loadFonts` ### Parameters #### Parameters - **fonts** (`FontDescriptor[]`) - Required - An array of font descriptors. - **basePath** (`string`) - Optional - Base path for all font files. Defaults to the current directory (`__dirname`). ### FontDescriptor Interface ```typescript interface FontDescriptor { path: string; // Relative path to the font file family: string; // Font family name weight?: string; // Font weight (e.g., '400', '700') style?: string; // Font style (e.g., 'normal', 'italic') } ``` ### Request Example ```typescript import { loadFonts, RankCardBuilder } from 'discord-card-canvas'; // Load multiple custom fonts loadFonts([ { path: './fonts/Roboto-Bold.ttf', family: 'Roboto', weight: '700', style: 'normal', }, { path: './fonts/Inter-SemiBold.ttf', family: 'Inter', weight: '600', style: 'normal', }, ]); // Create a rank card using the loaded fonts const rankCard = await new RankCardBuilder({ nicknameText: { content: 'ChampionX', font: 'Roboto', color: '#0CA7FF', size: 42, weight: '700', }, avatarImgURL: 'URL.png', currentLvl: 25, currentRank: 1, currentXP: 5000, requiredXP: 10000, userStatus: 'online', fontDefault: 'Inter', backgroundColor: { background: '#000', bubbles: '#0CA7FF' }, }).build({ objectFit: 'cover' }); fs.writeFileSync('rank-custom-font.png', rankCard.toBuffer()); ``` ### Notes - Fonts must be registered **before** creating any card that uses them. - Typically, load fonts at the entry point of your application. - If a font is already registered, repeated loading does not occur. ``` -------------------------------- ### Create a Blue Level Up Card Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Generates a level-up card with a blue theme, including nickname, previous and new levels, avatar, status, and background pattern. ```typescript const canvasLevelUp = await new LevelUpBuilder({ nicknameText: { content: 'Raccoon Bot', font: 'Nunito', color: '#0CA7FF' }, previousLvl: 4, newLvl: 5, avatarImgURL: 'avatar.jpg', userStatus: 'dnd', backgroundColor: { background: '#070d19', pattern: 'bubbles', patternColor: '#0CA7FF' }, }).build(); fs.writeFileSync('level-up.png', canvasLevelUp.toBuffer()); ``` -------------------------------- ### Create an Advanced Rank Card with Custom Styling Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Generates a rank card with extensive custom styling, including a square avatar and specific colors for progress bars and text. The 'objectFit: "cover"' option is used during the build process. ```typescript import { RankCardBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Advanced rank card with custom styling and square avatar const customRankCard = await new RankCardBuilder({ currentLvl: 50, currentRank: 3, currentXP: 23478, requiredXP: 68195, fontDefault: 'Inter', backgroundColor: { background: '#fff', bubbles: '#f48b2d' }, avatarImgURL: 'https://example.com/avatar.png', nicknameText: { content: 'Good_Hateful' }, userStatus: 'online', avatarShape: 'square', userStatusEnable: true, bubblesEnable: true, requiredXPColor: '#7F8381', currentXPColor: '#f48b2d', avatarBackgroundColor: '#fbbf60', colorTextDefault: '#f48b2d', progressBarColor: '#f48b2d', lvlNumFormat: { font: 'Inter', size: 60, weight: '600', color: '#f48b2d' }, rankNumFormat: { font: 'Inter', size: 60, weight: '600', color: '#f48b2d' }, }).build({ objectFit: 'cover' }); fs.writeFileSync('rank_custom.png', customRankCard.toBuffer()); ``` -------------------------------- ### Create an Orange Level Up Card Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Generates a level-up card with an orange theme, customizing text colors, background pattern, and specific text elements like 'LEVEL UP'. ```typescript const canvasLevelUp = await new LevelUpBuilder({ nicknameText: { content: 'Raccoon Developer', font: 'Nunito', color: '#f48b2d' }, previousLvl: 24, newLvl: 25, avatarImgURL: 'avatar.jpg', userStatus: 'idle', colorTextDefault: '#f48b2d', avatarBackgroundColor: '#fbbf60', backgroundColor: { background: '#1a1a2e', pattern: 'stars', patternColor: '#f48b2d' }, levelUpText: { content: 'LEVEL UP', color: '#d4782a' }, }).build(); fs.writeFileSync('level-up-orange.png', canvasLevelUp.toBuffer()); ``` -------------------------------- ### Load Single Font with loadFont Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Use loadFont to register an individual font file. Provide the path to the font and its face properties (family, weight, style). ```typescript import { loadFont } from 'discord-card-canvas'; // Register a single font loadFont('./fonts/Inter-Regular.ttf', { family: 'Inter', weight: '400', style: 'normal', }); ``` -------------------------------- ### Load Custom Fonts with discord-card-canvas Source: https://context7.com/gusarovv/discord-card-canvas/llms.txt Registers custom fonts for use in card creation. Ensure fonts are loaded before creating cards that reference them. ```typescript import { loadFont, loadFonts, RankCardBuilder } from 'discord-card-canvas'; import * as fs from 'fs'; // Load a single font loadFont('./fonts/Roboto-Bold.ttf', { family: 'Roboto', weight: '700', style: 'normal', }); // Load multiple fonts at once loadFonts([ { path: './fonts/Inter-Regular.ttf', family: 'Inter', weight: '400', style: 'normal', }, { path: './fonts/Inter-Bold.ttf', family: 'Inter', weight: '700', style: 'normal', }, { path: './fonts/Roboto-Italic.ttf', family: 'Roboto', weight: '400', style: 'italic', }, ]); // Use custom fonts in cards const cardWithCustomFont = await new RankCardBuilder({ nicknameText: { content: 'ChampionX', font: 'Roboto', color: '#0CA7FF', size: 42, weight: '700' }, avatarImgURL: 'https://example.com/avatar.png', currentLvl: 25, currentRank: 1, currentXP: 5000, requiredXP: 10000, userStatus: 'online', fontDefault: 'Inter', backgroundColor: { background: '#000', bubbles: '#0CA7FF' }, }).build({ objectFit: 'cover' }); fs.writeFileSync('custom-font-card.png', cardWithCustomFont.toBuffer()); ``` -------------------------------- ### Create an Orange Rank Card Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Generates a rank card with an orange theme, customizing various text and color properties. The 'only' option limits the generated card elements. ```typescript const canvasRank = await new RankCardBuilder({ currentLvl: 50, currentRank: 3, currentXP: 23478, requiredXP: 68195, fontDefault: 'Inter', backgroundColor: { background: '#fff', bubbles: '#f48b2d' }, avatarImgURL: 'avatar.jpg', nicknameText: { content: 'Good_Hateful' }, userStatus: 'online', requiredXPColor: '#7F8381', currentXPColor: '#f48b2d', avatarBackgroundColor: '#fbbf60', colorTextDefault: '#f48b2d', progressBarColor: '#f48b2d', lvlNumFormat: { font: 'Inter', size: 60, weight: '600', color: '#f48b2d' }, rankNumFormat: { font: 'Inter', size: 60, weight: '600', color: '#f48b2d' }, }).build({ only: ['background', 'nickname', 'avatar'], objectFit: 'cover', }); fs.writeFileSync('rank_orange.png', canvasRank.toBuffer()); ``` -------------------------------- ### Register Multiple Fonts with loadFonts Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Use `loadFonts` to register multiple custom fonts at once. Ensure fonts are registered before creating any cards that utilize them. ```typescript import { loadFonts } from 'discord-card-canvas'; // Register multiple fonts loadFonts([ { path: './fonts/Inter-Regular.ttf', family: 'Inter', weight: '400', style: 'normal', }, { path: './fonts/Inter-Bold.ttf', family: 'Inter', weight: '700', style: 'normal', }, { path: './fonts/Roboto-Italic.ttf', family: 'Roboto', weight: '400', style: 'italic', }, ]); ``` -------------------------------- ### Create Card with Custom Font Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md After loading a custom font with loadFont, you can use its 'family' name in card builder configurations to apply it to text elements. Ensure the font is loaded before building the card. ```typescript import { loadFont, BaseCardBuilder } from 'discord-card-canvas'; // Load the custom font loadFont('./fonts/Roboto-Bold.ttf', { family: 'Roboto', weight: '700', style: 'normal', }); // Create a card using the custom font const card = await new BaseCardBuilder({ mainText: { content: '- Main Text -', weight: '700', size: 45, color: '#0CA7FF', font: 'Roboto', }, nicknameText: { content: 'Nickname', weight: '400', size: 40, color: '#0CA7FF', font: 'Roboto', }, secondText: { content: 'Second Text', weight: '300', size: 35, color: '#0CA7FF', font: 'Roboto', }, }).build(); fs.writeFileSync('custom-font-card.png', card.toBuffer()); ``` -------------------------------- ### FontDescriptor Interface Definition Source: https://github.com/gusarovv/discord-card-canvas/blob/main/readme.md Defines the structure for describing a font file, including its path, family, weight, and style. ```typescript interface FontDescriptor { path: string; // Relative path to the font file family: string; // Font family name weight?: string; // Font weight (e.g., '400', '700') style?: string; // Font style (e.g., 'normal', 'italic') } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.