JavaScript Image Manipulation Program
The "JavaScript Image Manipulation Program"
An image processing library for Node written entirely in JavaScript, with zero native dependencies.
For any issue, contact me on discord: Silvano#8106
Use Node.js and npm to install JIMP
npm i jimp
We are going to learn:
-How to write on images
-How to add an image over another one
-How to make a bot that welcome new users with an image that contains their avatar and their username
-How to use jimp functions
Let's declare our JIMP variable:
var jimp = require('jimp');
Obviously for getting started with editing images, we need to declare the font, and the image we need to edit
jimp.loadFont()
jimp.read()
let nameyouwant = await jimp.loadFont(font)
let nameyouwant = await jimp.read('link')
let font = await jimp.loadFont(jimp.FONT_SANS_32_BLACK) //We load the font sans, with size 32 and color black
let welcome = await jimp.read('https://i.imgur.com/x8CDupD.png') //We load that image
Jimp.FONT_SANS_8_BLACK; // Open Sans, 8px, black
Jimp.FONT_SANS_10_BLACK; // Open Sans, 10px, black
Jimp.FONT_SANS_12_BLACK; // Open Sans, 12px, black
Jimp.FONT_SANS_14_BLACK; // Open Sans, 14px, black
Jimp.FONT_SANS_16_BLACK; // Open Sans, 16px, black
Jimp.FONT_SANS_32_BLACK; // Open Sans, 32px, black
Jimp.FONT_SANS_64_BLACK; // Open Sans, 64px, black
Jimp.FONT_SANS_128_BLACK; // Open Sans, 128px, black
Jimp.FONT_SANS_8_WHITE; // Open Sans, 8px, white
Jimp.FONT_SANS_16_WHITE; // Open Sans, 16px, white
Jimp.FONT_SANS_32_WHITE; // Open Sans, 32px, white
Jimp.FONT_SANS_64_WHITE; // Open Sans, 64px, white
Jimp.FONT_SANS_128_WHITE; // Open Sans, 128px, white
Most of the time, jimp on discord.js is used to write on images to do that, we need to use the print function
jimp.print()
jimp.print(font, x, y, 'print message')
let font = await jimp.loadFont(jimp.FONT_SANS_32_BLACK)
let welcome = await jimp.read('https://i.imgur.com/x8CDupD.png')
welcome.print(font, 508, 200, member.user.username) //We print the username on the image "welcome"
Now let's see how to get an image over another. To do this we need to use the composite function
jimp.composite()
jimp.composite(image we declared, x, y)
let welcome = await jimp.read('https://i.imgur.com/x8CDupD.png')
jimp.read(member.user.displayAvatarURL).then(avatar => { //We take the user's avatar and declare it
avatar.resize(318, 317) //We resize the avatar
welcome.composite(avatar, 43, 38) //We put the avatar on the image on the position 43, 38
Finally we are at the end of the guide, now let's see how to create a png file with our final image. We need to use the write function
jimp.write()
jimp.write('Name file.png')
member.guild.channels.get('CHANNELID').send(``, { files: ["Name file.png"] })
let welcome = await jimp.read('https://i.imgur.com/x8CDupD.png') //We load the image from that link
welcome.print(font64, 508, 200, member.user.username) //We print the username on the image
welcome.write('Welcome2.png') //We create a png file called Welcome2
member.guild.channels.get('552975320131567638').send(``, { files: ["Welcome2.png"] }) //We sent the file to the channel
I hope this will help you, i worked 2 days on a bot trying to learn how jimp works and how can it be used in a discord.js bot.
Below you can find a code example
This is the source from my private bot, here tou can see how to make a bot that welcome new users and send an image to the channel with their usernames and avatar Let's start!
const Discord = require('discord.js');
const client = new Discord.Client();
const prefix = "!"
var jimp = require('jimp');
client.on('ready', () => {
console.log(`Logged in as ${client.user.tag}!`);
});
client.on('guildMemberAdd', async member => {
let font = await jimp.loadFont(jimp.FONT_SANS_32_BLACK) //We declare a 32px font
let font64 = await jimp.loadFont(jimp.FONT_SANS_64_BLACK) //We declare a 64px font
let mask = await jimp.read('https://i.imgur.com/552kzaW.png') //We load a mask for the avatar, so we can make it a circle instead of a shape
let welcome = await jimp.read('https://i.imgur.com/x8CDupD.png') //We load the base image
jimp.read(member.user.displayAvatarURL).then(avatar => { //We take the user's avatar
avatar.resize(318, 317) //Resize it
mask.resize(318, 317) //Resize the mask
avatar.mask(mask) //Make the avatar circle
welcome.print(font64, 508, 200, member.user.username) //We print the new user's name with the 64px font
welcome.composite(avatar, 43, 38).write('Welcome2.png') //Put the avatar on the image and create the Welcome2.png bot
member.guild.channels.get('552975320131567638').send(``, { files: ["Welcome2.png"] }) //Send the image to the channel
console.log('Image sent!')
})
.catch(err => {
console.log('error sending the avatar')
})
})