JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q36434F
  • License MIT

A simple card module with Canvas.

Package Exports

    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 (custom-cards) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Custom Cards

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

    Downloads NPM Version

    Tabla de contenido

    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:

    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:

    img

    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:

    Gracias :D