Générer une image avec Canvas | DiscordJS  3 min  

Bonjour,

Aujourd'hui, nouveau tutoriel pour savoir générer une image grâce à une commande sur un bot Discord avec Discord.JS
Commençons donc à créer la zone ou nous allons mettre tout le code.

1. Créer un fichier .js

Mettez dans ce fichier les lignes suivantes. Ceci peut varier selon DiscordJS, DiscordJS Commando ect...

const Discord = require("discord.js");
// ici nous y ajouterons canvas
module.exports.run = async (client, message, args, prefix, logs) => {
 //Le code suivant sera ici !
}
module.exports.command = {
  name: "generate_image",
  aliases: ["image"],
  permission: "none",
  description: "Génère une image avec un texte.",
  usage: "image <langage> <text>",
  args: true,
  args_min: 3,
  need_logs: false,
  category: "INFORMATION",
  enabled: true
};

2. Installation de Canvas

Premièrement, vous allez devoir installer canvas sur votre bot discord

npm i canvas

Une fois cela de mis, mettez sur votre fichier .js la ligne pour inclure canvas.

const Canvas = require('canvas');

Voilà, une fois cela de fait, nous allons pouvoir créer la commande.

3. Création de la commande

Créons une image de taille 1000x500 (un rectangle quoi).

const canvas = Canvas.createCanvas(1000, 500);

Une fois cela de fait, définisons l'image comme 2d.

const ctx = canvas.getContext('2d');

Désormais, nous allons choisir l'image que nous souhaitons en arrière plan. Cela peut être un .jpg comme .png ect...

const background = await Canvas.loadImage('generate_image.jpg');

Une fois le background défini, l'image 2d et la taille de l'image, nous souhaitons que le contours de l'image soit de couleur grisé.

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "#161b28";
ctx.strokeRect(0, 0, canvas.width, canvas.height);

Maintenant, rajoutons du texte.

ctx.font = '70px sans-serif';
ctx.fillStyle = "#ffffff";
ctx.fillText(`${titre}`, 50, 40);

Désormais, l'image est enfin terminé, il faut donc mettre la ligne qui suit

ctx.beginPath();

Mais ce n'est pas encore fini, il faut rajouter l'envoie du message avec l'image que nous venons de créer

const attachment = new Discord.Attachment(canvas.toBuffer(), 'custom__image.png');

message.channel.send('Test', attachment);

Et voilà, c'est enfin terminé.
L'image est enfin généré une fois que vous définissez votre commande.

 

Vous y retrouverez un fichier .zip téléchargeable avec toutes les sources qui ont permis à créer la commande.

Auteur

KilioZ

Étudiant en BTS Travaux Publics au Pas-de-Calais. Fondateur de Dev-Time, développeur web depuis 2013.


  Discord : Matéo M.#6452   Reddit : KilioZDev