discord-image-utils
Advanced tools
A powerful library for generating and modifying images with Discord.js - includes meme generation, filters, effects and animations
This package is a reimplementation of discord-image-generation, enhanced with additional features . While inspired by the original package, it has been completely rewritten to provide better TypeScript support, improved performance, and compatibility .
A TypeScript library for generating and modifying images for use with Discord.js.
# Using npm
npm install discord-image-utils
# Using yarn
yarn add discord-image-utils
# Using pnpm
pnpm add discord-image-utils
import { AttachmentBuilder } from 'discord.js';
import { blur, gay, triggered, wanted } from 'discord-image-utils';
// Example: Using in a Discord.js command
async function imageCommand(message, imageUrl) {
try {
// Apply a filter
const blurredImage = await blur(5, imageUrl);
const attachment = new AttachmentBuilder(blurredImage, { name: 'blurred.png' });
await message.reply({ files: [attachment] });
// Create a GIF
const triggeredGif = await triggered(imageUrl);
const gifAttachment = new AttachmentBuilder(triggeredGif, { name: 'triggered.gif' });
await message.reply({ files: [gifAttachment] });
} catch (error) {
console.error('Error processing image:', error);
}
}
All filter functions return a Promise that resolves to a Buffer containing the modified image.
blur(intensity: number, imageUrl: string): Promise<Buffer>Applies a Gaussian blur effect to the image.
intensity: Blur intensity (1-20)imageUrl: URL or file path of the source imagegay(imageUrl: string): Promise<Buffer>Applies a rainbow overlay effect.
greyscale(imageUrl: string): Promise<Buffer>Converts the image to grayscale.
invert(imageUrl: string): Promise<Buffer>Inverts the colors of the image.
sepia(imageUrl: string): Promise<Buffer>Applies a sepia tone effect.
blink(delay: number, imageUrl1: string, imageUrl2: string): Promise<Buffer>Creates a blinking effect between two images.
delay: Time in milliseconds between framesimageUrl1: First image URL/pathimageUrl2: Second image URL/pathtriggered(imageUrl: string): Promise<Buffer>Creates a "triggered" meme GIF.
wanted(imageUrl: string): Promise<Buffer>Creates a "wanted" poster with the image.
kiss(image1Url: string, image2Url: string): Promise<Buffer>Creates a kissing scene with two images.
Batslap(image1Url: string, image2Url: string): Promise<Buffer>Creates a Batman slapping meme with two images.
stonk(imageUrl: string): Promise<Buffer>Creates a "stonks" meme with the image.
notStonk(imageUrl: string): Promise<Buffer>Creates a "not stonks" meme with the image.
lisaPresentation(text: string): Promise<Buffer>Creates a Lisa Simpson presentation meme with custom text.
sticker(image: ImageInput, borderSize?: number): Promise<Buffer>Applies a sticker effect with white border and drop shadow to an image.
image: URL or file path of the source imageborderSize: Size of the white border (5-50, default: 15)Example:
const stickerImage = await sticker(userAvatarUrl, 20);
RankCard: Class for Creating Dynamic Level CardsCreates customizable rank/level cards with various layouts, themes, and visual elements. Perfect for Discord bots with leveling systems.
import { RankCard } from 'discord-image-utils';
// Create a basic rank card
const card = new RankCard({
name: "Username",
level: 10,
avatar: "https://example.com/avatar.png", // URL or Buffer
xp: 750,
maxXp: 1000,
theme: "neon"
});
// Customize with chainable methods
card.setProgressBarGradient([
{ color: "#ff00ff", position: 0 },
{ color: "#00ffff", position: 1 }
])
.setAvatarGlow("#ff00ff")
.setLayout("futuristicHUD");
// Render the card
const buffer = await card.render();
The RankCard supports multiple layout designs:
classic: Standard card layout with rounded cornersfuturisticHUD: Sci-fi themed layout with hexagonal elements and HUD-style displaysplit: Two-column layout (avatar | stats)ribbon: Trophy-style card with decorative elementsdiagonal: Angular layout with diagonal divisionstacked: Layered design with overlapping elementsBuilt-in themes that affect colors and generated backgrounds:
default: Clean, modern designfuturistic: Tech-inspired with circuit patternsneon: Dark theme with glowing elementsminimal: Simple, light design with subtle patternsaurora: Space-inspired with flowing aurora effectssunset: Warm tones with ray patternsinterface LevelOptions {
// Basic info
name: string; // Username
level: number; // Level number
avatar: ImageInput; // Avatar URL/Buffer or Discord user object
xp: number; // Current XP
maxXp: number; // XP required for current level
nextLevelXp?: number; // XP for next level
levelUpXp?: number; // XP needed to level up
progress?: number; // Override progress calculation (0-1)
// Layout and theme
layout?: LayoutType; // Card layout design
theme?: ThemeName; // Preset color theme
// Display options
showNextLevelXp?: boolean; // Show next level XP info
showLevelUpXp?: boolean; // Show XP needed to level up
maxNameWidth?: number; // Max width for username display
// Visual customization
progressBarColor?: string;
progressBarGradient?: GradientStop[];
textColor?: string;
fontSize?: number;
bold?: boolean;
fontFamily?: string;
textEffect?: TextEffectOptions;
// Background
backgroundBlur?: number;
backgroundOverlay?: string;
backgroundImage?: ImageInput;
// Avatar
avatarGlow?: string;
avatarGlowIntensity?: number;
avatarSize?: number;
avatarBorder?: string;
avatarBorderWidth?: number;
}
Example with Futuristic HUD layout:
const rankCard = new RankCard({
name: "COMMANDER_01",
level: 42,
avatar: message.author, // Discord.js user object
xp: 8750,
maxXp: 10000,
theme: "futuristic",
layout: "futuristicHUD",
avatarGlow: "#00FFFF",
avatarGlowIntensity: 25
});
const attachment = new AttachmentBuilder(await rankCard.render(), { name: 'rank.png' });
await message.reply({ files: [attachment] });
drake(text1: string, text2: string, options?: DrakeOptions): Promise<Buffer>Creates a Drake meme with customizable text and styling.
Options:
interface DrakeOptions {
fontSize?: number; // Text size (default: 32)
textColor?: string; // Text color (default: "#000000")
bold?: boolean; // Use bold text (default: true)
maxWidth?: number; // Max text width before wrapping (default: 300)
padding?: number; // Text padding from edges (default: 20)
}
Example:
const drakeMeme = await drake(
"Using complex code",
"Using simple solutions",
{
fontSize: 36,
textColor: "#333333",
bold: true
}
);
wave(image: ImageInput, options?: WaveOptions): Promise<Buffer>Applies a wave distortion effect to an image.
Options:
interface WaveOptions {
amplitude?: number; // Wave height (1-50, default: 10)
frequency?: number; // Wave frequency (1-20, default: 5)
phase?: number; // Wave phase (0-360, default: 0)
direction?: "horizontal" | "vertical" | "both"; // Wave direction (default: "both")
}
Example:
const wavedImage = await wave(imageUrl, {
amplitude: 15,
frequency: 8,
direction: "horizontal"
});
glitch(image: ImageInput, intensity?: number): Promise<Buffer>Creates a digital glitch art effect with RGB channel shifts and visual corruption.
image: URL or file path of the source imageintensity: Glitch intensity (1-10, default: 5)Example:
const glitchedImage = await glitch(userAvatarUrl, 7);
Music(options: MusicImageOptions): Promise<Buffer>Creates a stylized music player image with album art and progress bar, perfect for Discord music bots and rich presence displays.
Options:
interface MusicImageOptions {
image: string; // URL or path of album artwork
title: string; // Song title
artist: string; // Artist name
time: {
currentTime: number; // Current playback time in seconds
totalTime: number; // Total song duration in seconds
};
progressBar?: {
color?: string; // Progress bar color (default: "#ffffff")
backgroundColor?: string; // Background color (default: "#000000")
width?: number; // Bar width in pixels (default: 300)
height?: number; // Bar height in pixels (default: 10)
rounded?: boolean; // Rounded corners (default: true)
};
background?: {
type?: "blur" | "gradient" | "solid"; // Background style
color?: string; // For solid background
gradient?: string[]; // For gradient background
blurAmount?: number; // For blur background (1-20)
};
font?: {
title?: string; // Title font family
artist?: string; // Artist font family
time?: string; // Time font family
};
}
Example:
const musicCard = await Music({
image: "https://example.com/album-art.jpg",
title: "Never Gonna Give You Up",
artist: "Rick Astley",
time: {
currentTime: 42,
totalTime: 213
},
progressBar: {
color: "#ff0000",
backgroundColor: "#333333",
rounded: true
},
background: {
type: "gradient",
gradient: ["#1e1e1e", "#2d2d2d"]
}
});
quote(options: QuoteOptions): Promise<Buffer>Creates beautifully styled quote images with customizable typography, backgrounds, and visual effects.
Options:
interface QuoteOptions {
quote: string; // The quote text
author?: string; // Quote author (optional)
style?: {
theme?: "light" | "dark" | "minimal" | "elegant";
fontFamily?: string; // Custom font for quote text
fontSize?: number; // Base font size
textAlign?: "left" | "center" | "right";
padding?: number; // Padding around text
};
background?: {
type: "gradient" | "pattern" | "solid" | "image";
gradient?: {
type: "linear" | "radial";
colors: string[]; // Array of color values
angle?: number; // For linear gradients (0-360)
};
pattern?: {
type: "dots" | "lines" | "grid" | "waves" | "chevron";
color?: string;
opacity?: number; // Pattern opacity (0-1)
scale?: number; // Pattern size multiplier
};
image?: string; // URL for background image
color?: string; // For solid backgrounds
};
effects?: {
shadow?: boolean; // Text shadow effect
glow?: boolean; // Text glow effect
blur?: number; // Background blur amount
vignette?: boolean; // Vignette effect
noise?: number; // Noise overlay amount (0-1)
};
dimensions?: {
width?: number; // Output image width
height?: number; // Output image height
aspectRatio?: string; // Or use aspect ratio (e.g., "16:9")
};
}
Example:
const quoteImage = await quote({
quote: "Be the change you wish to see in the world.",
author: "Mahatma Gandhi",
style: {
theme: "elegant",
fontFamily: "Playfair Display",
textAlign: "center"
},
background: {
type: "gradient",
gradient: {
type: "linear",
colors: ["#2193b0", "#6dd5ed"],
angle: 45
}
},
effects: {
shadow: true,
glow: true,
vignette: true
},
dimensions: {
aspectRatio: "1:1"
}
});
Many functions accept an optional configuration object:
interface ImageOptions {
width?: number; // Output width
height?: number; // Output height
quality?: number; // Image quality (1-100)
format?: string; // Output format ('png' | 'jpeg' | 'gif')
background?: string; // Background color (CSS color string)
}
// Example with options
const customImage = await wanted(imageUrl, {
width: 800,
height: 600,
quality: 90,
format: 'png'
});
try {
const image = await blur(5, imageUrl);
} catch (error) {
if (error.message.includes('INVALID_URL')) {
console.error('Invalid image URL provided');
} else if (error.message.includes('UNSUPPORTED_FORMAT')) {
console.error('Unsupported image format');
} else {
console.error('An error occurred:', error);
}
}
Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have questions:
FAQs
A powerful library for generating and modifying images with Discord.js - includes meme generation, filters, effects and animations
The npm package discord-image-utils receives a total of 67 weekly downloads. As such, discord-image-utils popularity was classified as not popular.
We found that discord-image-utils demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MCP spec updated with structured tool output, stronger OAuth 2.1 security, resource indicators, and protocol cleanups for safer, more reliable AI workflows.
Security News
More than half of CISOs now manage 10+ security areas, often with few legal safeguards and short tenures, yet continue to secure budgets and higher pay.
Security News
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.