@ienznotfound/smeme-canvas

Generate classic top/bottom text memes (PNG) and animated progressive text-reveal videos (GIF) directly in Node.js! Inspired by brat-canvas.

✨ Features

• Static Memes: Add classic impact-style top and bottom text to any image.
• Animated Text GIFs: Create videos where the text appears word-by-word. No ffmpeg required!
• Animated Backgrounds (smemegif): Process animated GIF/WebP backgrounds while retaining their animation.
• Full Emoji Support: Built-in support for OS emojis, with .addFontEmoji() for custom emoji fonts.
• Chainable API: Easy-to-use builder pattern.
• Auto-Scaling: Font size automatically adjusts so it never gets cut off.
• Customizable Colors: Set different colors for top and bottom text.

📦 Installation

npm install @ienznotfound/smeme-canvas

🚀 Quick Start

1. Static Image (PNG)

const fs = require('fs');
const { smeme } = require('@ienznotfound/smeme-canvas');

async function createMeme() {
  // You can pass an Image URL, a Local File Path (e.g., './my-image.jpg'), or a Buffer!
  const imgBuffer = await new smeme('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7v_9SzhgpY9LrmrzVHLq9dssHoIor1GrjAO40N6pXP1Yj9zTgmFAuXp91&s=10')
    .addTextTop('NO STRESS')
    .addTextBottom('JUST VIBING')
    .colorTop('yellow')   // Top text color
    .colorBottom('white') // Bottom text color
    .fontSize(100)        // Optional: Leave empty for auto-scaling
    .fontStyle('Impact')  
    .addFontEmoji('Noto Color Emoji') // Support emojis effortlessly! 😂
    .generate();
    
  fs.writeFileSync('output.png', imgBuffer);
}
createMeme();

2. Animated Video (GIF)

Text will appear word-by-word!

const fs = require('fs');
const { smeme } = require('@ienznotfound/smeme-canvas');

async function createAnimatedMeme() {
  // Local paths are also supported, no need to download from the web!
  const gifBuffer = await new smeme('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7v_9SzhgpY9LrmrzVHLq9dssHoIor1GrjAO40N6pXP1Yj9zTgmFAuXp91&s=10')
    .addTextTop('NO STRESS')
    .addTextBottom('JUST VIBING')
    .color('white')       // Sets both top and bottom text color
    .gif({ delay: 500 }) // Delay per word in milliseconds
    .generate();
    
  fs.writeFileSync('output.gif', gifBuffer);
}
createAnimatedMeme();

3. Animated Background Meme (smemegif)

Process animated GIF or WebP images and retain their animation while drawing static text or animated text on top!

const fs = require('fs');
const { smemegif } = require('@ienznotfound/smeme-canvas');

async function createAnimatedBackgroundMeme() {
  const animBuffer = await new smemegif('https://media.tenor.com/EjlzWbUoN3wAAAA1/prabowo.webp')
    .addTextTop('KETIKA KAMU')
    .addTextBottom('HIDUP JOKOWI 🇮🇩')
    .color('white')
    .gif() // Optional: Makes the text appear word-by-word synchronised to the GIF
    .generate();
    
  fs.writeFileSync('output_prabowo.gif', animBuffer);
}
createAnimatedBackgroundMeme();

🎨 Supported Colors

Because this library uses a native Canvas renderer, you can use ANY HTML/CSS Color Format:

• Names: 'white', 'black', 'red', 'blue', 'yellow', 'cyan', 'magenta', dll.
• HEX Codes: '#FFFFFF', '#FF5733'
• RGB / RGBA: 'rgb(255, 255, 255)', 'rgba(0, 0, 0, 0.5)'

🔤 Supported Fonts

By default, the library can read all fonts installed on your operating system. Some popular fonts you can use immediately:

• Meme Standard: 'Impact', 'Arial', 'Comic Sans MS', 'Tahoma'
• Modern: 'Segoe UI', 'Calibri', 'Verdana'
• Monospace: 'Consolas', 'Courier New'
• Others: 'Georgia', 'Times New Roman'

Just pass the font name into .fontStyle('Font Name')!

😃 Emoji Support

smeme-canvas automatically falls back to "Segoe UI Emoji", "Apple Color Emoji", and "Noto Color Emoji" if an emoji is drawn. If you want to use a specific emoji font you registered using @napi-rs/canvas, simply use .addFontEmoji('My Emoji Font').