Custom Cards

Un simple módulo de manipulación de imágenes con Canvas, escrito en TypeScript.

Tabla de contenido

• Instalación

• Importar Módulo

• Tarjetas

• Métodos

  • Estáticos
  • Extras

• Clase Welcome

• Función render

• Detalles del proyecto

Instalación

npm install custom-cards

Uso

Importar módulo

• ESM:

import * as CustomCards from "custom-cards";

• CommonJS:

const CustomCards = require("custom-cards");

Tarjetas:

Los métodos disponibles al importar el módulo.

Tarjeta	Tipo
Welcome	Class

Métodos estáticos:

• <card>.render()

Métodos extras:

Método	Tipo	Descripción
registerFont	Function	Registra tus propias fuentes tipográficas.
Fonts	Enum	Enumerado con las fuentes por defecto.

Clase Welcome:

Método	Tipo	Descripción
setAvatar(options)	options: AvatarOptions	Establece el avatar de la tarjeta.
setImage(src)	src: Source	Establece la imágen de fondo. (opcional)
setFont(font)	font: Fonts | string	Establece la fuente tipográfica.
setText(options)	options: TextOptions[]	Establece el texto de la tarjeta.

const card = new CustomCards.Welcome()
  .setAvatar({
    src: "https://yumikodev.vercel.app/avatar.webp",
    frameColor: "#ff7eae",
    frameType: "square",
  })
  .setBackground("https://cdn.nekos.life/wallpaper/cGsBtWbjaGs.jpg")
  .setText([
    {
      content: "Bienvenid@ usuario",
      color: "#fff",
    },
    {
      content: "Descripción aquí.",
      color: "#eee",
    },
  ])
  .setFont(CustomCards.Fonts.Fredoka);

Ejemplo:

Función render:

El uso de la función render (teoría).

[!NOTE] La función render es asíncrona, por lo que tendra que usar Promesas o async / await.

• Ejemplo de uso:

  Cada tarjeta tendrá un método estático que construirá la Tarjeta respectiva. A esta función se le debe pasar la instancia de la tarjeta.

  const buffer = await Welcome.render(card);
  
  console.log(buffer);

Detalles del proyecto:

• Licencia: MIT License
• Autor: Yasu Yumiko

Gracias :D