Package Exports

canvacard
canvacard/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvacard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm i canvacard

For CommonJS

const canvacard = require("canvacard");

For EsModule And TypeScript

import canvacard from "canvacard";

✨Features

🪟 Código abierto y sin preocupaciones de privacidad, totalmente transparente - Canvacard es de código abierto y gratuito. Puedes colaborar y no tendrás que inquietarte por la privacidad.
💪 Sencillo de utilizar - Canvacard ofrece una API intuitiva y fácil para generar imágenes eficientemente, perfecta para desarrolladores de todos los niveles.
🚀 Velocidad y optimización - Las bibliotecas que usa están muy optimizadas, ofreciendo un rendimiento excepcional en la creación de imágenes.
🔒 Soporte para Typescript - Canvacard está desarrollado en Typescript, lo que permite usar definiciones de tipo y mejora la experiencia del desarrollador.
🎨 Más de 50 opciones de personalización - Tienes acceso a muchas herramientas para ajustar y modificar completamente tus imágenes o tarjetas.
🖼️ Creación de tarjetas interactivas y personalizadas - Canvacard es perfecto para crear tarjetas personalizadas para Discord, añadiendo gráficos, banners, insignias y más.
🛠️ Diseño orientado a objetos - Canvacard está construido con un enfoque en programación orientada a objetos, facilitando la reutilización y creación de tarjetas complejas.
🤓 Ideal para principiantes - La API y documentación son simples, lo que lo hace accesible incluso para quienes tienen poca experiencia en el manejo de imágenes.

📦Examples

Rank Card

const { AttachmentBuilder } = require("discord.js");
const canvacard = require("canvacard");
const userData = getDataSomehow(); // Simula obtener los datos del usuario

const rank = new canvacard.Rank()
  .setAvatar(userData.avatarURL, userData.avatar_decoration_data.asset, false)
  .setBanner(userData.bannerURL, true)
  .setBadges(userData.flags, userData.bot, true)
  .setCurrentXP(userData.xp)
  .setRequiredXP(userData.requiredXP)
  .setRank(1, "RANK", true)
  .setLevel(20, "LEVEL")
  .setStatus("online")
  .setProgressBar(["#14C49E", "#FF0000"], "GRADIENT", true)
  .setUsername(userData.username, userData.discriminator, "#FFFFFF")
  .setCreatedTimestamp(userData.createdTimestamp)
  .setBorder(["#14C49E", "#FF0000"], "vertical");

rank.build("Cascadia Code PL")
  .then(data => {
    // Usar AttachmentBuilder para enviar el archivo
    const attachment = new AttachmentBuilder(data, { name: "RankCard.png" });
    message.channel.send({ content: "Aquí está tu tarjeta de rango:", files: [attachment] });
  })
  .catch(err => console.error("Error al crear la tarjeta de rango:", err));

PREVIEW

Welcome / Leave Card

const canvacard = require("canvacard");
const img = "https://cdn.discordapp.com/embed/avatars/0.png";
const background = "https://i.imgur.com/5O7xmVe.png";

const welcomer = new canvacard.WelcomeLeave()
  .setAvatar(img)
  .setBackground('COLOR', '#000000')
  .setTitulo("Titulo de la Tarjeta👋", '#FFFFFF')
  .setSubtitulo("Subtitulo de la Tarjeta 👋", '#FFFFFF')
  .setOpacityOverlay(1)
  .setColorCircle('#FFFFFF')
  .setColorOverlay('#5865F2')
  .setTypeOverlay('ROUNDED');

welcomer.build("Cascadia Code PL, Noto Color Emoji")
  .then(data => {
    // Usar AttachmentBuilder para enviar el archivo
    const attachment = new AttachmentBuilder(data, { name: "WelcomeCard.png" });
    message.channel.send({ content: "Aquí está tu tarjeta de bienvenida:", files: [attachment] });
  })
  .catch(err => console.error("Error al crear la tarjeta de bienvenida:", err));

PREVIEW

Spotify Card

const canvacard = require("canvacard");

const spotify = new canvacard.Spotify()
  .setAuthor("SAIKO")
  .setAlbum("SAKURA 👋")
  .setStartTimestamp(Date.now() - 10000)
  .setEndTimestamp(Date.now() + 50000)
  .setImage("https://i.scdn.co/image/ab67616d00001e02e346fc6f767ca2ac8365fe60")
  .setTitle("YO LO SOÑÉ");

spotify.build("Cascadia Code PL, Noto Color Emoji")
  .then(data => {
    // Usar AttachmentBuilder para enviar el archivo
    const attachment = new AttachmentBuilder(data, { name: "WelcomeCard.png" });
    message.channel.send({ content: "Aquí está tu tarjeta de bienvenida:", files: [attachment] });
  })
  .catch(err => console.error("Error al crear la tarjeta de bienvenida:", err));

Canvacard Circle

const canvacard = require("canvacard");

canvacard.Canvas.circle(data.avatarURL)
.then(data => {
  canvacard.write(data, "circle.png");
})
.catch(console.error);

Otros ejemplos

const { Client, GatewayIntentBits, AttachmentBuilder } = require("discord.js");
const canvacard = require("canvacard");

const client = new Client({
    intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent]
});

client.on('ready', () => {
  console.log('¡Estoy en línea!');
});

client.on('messageCreate', async (message) => {
  if (message.author.bot) return;

  if (message.content === '!triggered') {
    try {
      let avatar = message.author.displayAvatarURL({ dynamic: false, format: 'png' });
      let image = await canvacard.Canvas.trigger(avatar);
      // Enviar el archivo generado usando AttachmentBuilder
      let attachment = new AttachmentBuilder(image, { name: 'triggered.gif' });
      await message.channel.send({ content: '¡Aquí tienes tu imagen "triggered"!', files: [attachment] });
    } catch (err) {
      console.error('Error al generar la imagen triggered:', err);
    }
  }
});

client.login('Tu_Bot_Token_aqui');

PREVIEW