v6.0.0-beta.0

6.0.0-beta.0 (Experimental Release)

Documentation is a WIP.

New Image generation API (Partial)

import { canvacord } from 'canvacord';

// old image-generation methods
const triggered = await canvacord.triggered(img);
const trash = await canvacord.trash(img);

// image filterer methods (filters can be chained together)
// with 500x500 canvas size
const filtered = await canvacord.filters(500, 500).drawImage(img).hueRotate(70).encode();
// auto size detection
const filtered = await canvacord(img).hueRotate(70).encode();

Builders (Partial)

RankCardBuilder

import { RankCardBuilder } from 'canvacord';

const card = new RankCardBuilder()
    .setUsername('wumpus')
    .setDisplayName('Wumpus')
    .setDiscriminator('1234')
    .setAvatar('https://cdn.discordapp.com/embed/avatars/0.png?size=256')
    .setCurrentXP(300)
    .setRequiredXP(600)
    .setLevel(2)
    .setRank(5)
    .setStatus('online');

const image = await card.build({ format: 'png' }); // 'svg' generates svg image (best quality compared to other formats)

Leaderboard builder (prototype)

Builder API

Builder API allows you to create custom designs using react-like syntax and tailwindcss. You can use transpilers like babel or typescript to transpile jsx code.

import { JSX, Builder, Font } from 'canvacord';

interface Props {
  text: string;
}

class Design extends Builder<Props> {
  constructor() {
    // set width and height
    super(500, 500);
    // initialize props
    this.bootstrap({ text: '' });
  }

  setText(text: string) {
    this.options.set('text', text);
    return this;
  }

  // this is where you have to define output ui
  async render() {
    return (
      <div className="flex items-center justify-center h-full w-full bg-teal-500">
        <h1 className="text-white font-bold text-7xl">{this.options.get('text')}</h1>
      </div>
    );
  }
}

// usage

// load default font
Font.loadDefault();

// create design
const design = new Design().setText('Hello World');
const image = await design.build({ format: 'png' });

// do something with generated image

Output

For more info, join our discord server: https://neplextech.com/discord