catozolala-card-canvas/README.md

Generate stylish welcome cards with Node.js and canvas

# 🎉 catozolala-card-canvas

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)

> A modern Discord-like card generator — perfect for WhatsApp bots, Telegram bots, and other community projects!

<p align="center">
  <img src="https://img.shields.io/npm/v/catozolala-card-canvas?color=CB3837&label=NPM&logo=npm&logoColor=white" alt="NPM Package" style="height:200px;">
  <a href="https://whatsapp.com/channel/0029VaVKIxBKQuJK32uAi33W">
    <img src="https://img.shields.io/badge/Whatsapp-Channel-25D366?style=flat&logo=whatsapp&logoColor=white" alt="WhatsApp Channel" style="height:200px;">
  </a>
</p>

# 🎨 catozolala-card-canvas

Modul Node.js untuk membuat kartu sambutan (welcome card) dengan desain modern menggunakan `canvas`.

## 📖 Read More

`catozolala-card-canvas` is a Node.js library that automatically generates **clean and modern image cards**, inspired by Discord's welcome and goodbye card styles.

### ✨ Features
- Discord-style modern look
- Customizable background & avatar
- Display username, tag, and date
- Supports both **welcome** and **leaving** cards
- Output: PNG buffer ready to send to chat

🛠 **Created by:** `catozolala`  
☁️ **Baileys user:** `wave cloudx`

---

## 💬 Code
<br>
<img align="center" src="https://i.ibb.co/FbGm6p4d/IMG-20250606-WA0204.png" style="border-radius: 10px;"/>

<details>
<summary>📥 <b>drawWelcomeCard()</b></summary>

### COMMONJS
```js
const { drawWelcomeCard } = require('catozolala-card-canvas');
const fs = require('fs');

// Created by catozolala
// Baileys user: wave cloudx

(async () => {
  const buffer = await drawWelcomeCard({
    username: 'Catozolala',
    tag: '#0608',
    avatarURL: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png?q=60',
    backgroundURL: 'https://i.ibb.co/Ccg2ctT/background.png',
    date: 'Jun 6, 2025',
    isOnline: true // true green > false red
  });

  fs.writeFileSync('welcome.png', buffer);
})();
```

### ESM

```js
import { drawWelcomeCard } from 'catozolala-card-canvas';
import { writeFileSync } from 'fs';

const buffer = await drawWelcomeCard({
  username: 'Nekotina',
  tag: '#0608',
  avatarURL: 'https://example.com/avatar.jpg',
  backgroundURL: 'https://example.com/background.jpg',
  date: 'Jun 07, 2025',
  isOnline: true // true green > false red
});

```
</details>

<br>
<img align="center" src="https://i.ibb.co/fYJSqCVc/IMG-20250608-WA0155.png" style="border-radius: 10px;"/>

<details>
<summary>📥 <b>generateCardGlowInTheDark()</b></summary>

### COMMONJS
```js
const { generateCardGlowInTheDark } = require('catozolala-card-canvas');

(async () => {
  const buffer = await generateCardGlowInTheDark({
    avatarPath: "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png",
    teks: 'WELCOME',
    name: 'Spee',
    totalMember: 7123,
    backgroundPath: "https://i.ibb.co/b5ct2NSN/photo-1414831-jpg-d.jpg"
  });
})();
```

### ESM

```js
import { generateCardGlowInTheDark } from 'catozolala-card-canvas';

(async () => {
  const buffer = await generateCardGlowInTheDark({
    avatarPath: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png',
    teks: 'WELCOME',
    name: 'Spee',
    totalMember: 7123,
    backgroundPath: 'https://i.ibb.co/b5ct2NSN/photo-1414831-jpg-d.jpg'
  });

  // Simpan hasil jika perlu
  import { writeFile } from 'fs/promises';
  await writeFile('output.png', buffer);
})();
```

---

## 📦 Installation

```bash
npm install catozolala-card-canvas