Add image remix subcommand

commands/misc/graphisme.js

@@ -1,6 +1,7 @@
 const { SlashCommandBuilder } = require('discord.js');
 const Inspiration = require('./graphismecommands/inspiration.js');
-const Palette = require('./graphismecommands/palette.js')
+const Palette = require('./graphismecommands/palette.js');
+const Remix = require('./graphismecommands/remix.js');
 
 module.exports = {
     data: new SlashCommandBuilder()
@@ -17,6 +18,26 @@ module.exports = {
                 subcommand
                     .setName('palette')
                     .setDescription('Une palette harmonieuse générée aléatoirement.')
+        )
+        .addSubcommand(
+            subcommand =>
+                subcommand
+                    .setName('remix')
+                    .setDescription('Renvoie l\'image insérée avec un filtre appliqué.')
+                    .addAttachmentOption(option => option
+                        .setName('image')
+                        .setDescription('Image à modifier')
+                        .setRequired(true))
+                    .addStringOption(option =>
+                        option.setName('filter')
+                            .setDescription('Le filtre appliqué')
+                            .setRequired(true)
+                            .addChoices(
+                                { name: 'Invert', value: 'invert' },
+                                { name: 'Nuance de gris', value: 'grayscale' },
+                                { name: 'Sepia', value: 'sepia' },
+                                { name: 'Flou', value: 'blur' },
+                            ))
         ),
     async execute(interaction) {
         switch (interaction.options.getSubcommand()) {
@@ -26,6 +47,9 @@ module.exports = {
             case 'palette':
                 Palette.execute(interaction);
                 break;
+            case 'remix':
+                Remix.execute(interaction);
+                break;
         }
     }
 };

commands/misc/graphismecommands/remix.js

@@ -0,0 +1,128 @@
+const Canvas = require('canvas');
+const { AttachmentBuilder } = require('discord.js')
+
+module.exports = {
+    async execute(interaction){
+        const file = interaction.options.getAttachment('image');
+        if(!file.contentType.startsWith("image")) return interaction.reply({ content: "Merci d'envoyer une image", ephemeral: true });
+        await interaction.deferReply();
+        const filter = interaction.options.getString('filter');
+
+        const canvas = Canvas.createCanvas(500, 500);
+        const ctx = canvas.getContext('2d');
+    
+        const image = await Canvas.loadImage(file.url);
+        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+
+        switch(filter){
+            case 'invert':
+                applyInvertEffect(ctx);
+                break;
+            case 'grayscale':
+                applyGrayscaleEffect(ctx);
+                break;
+            case 'sepia':
+                applySepiaEffect(ctx);
+                break;
+            case 'blur':
+                applyBlurEffect(ctx);
+                break;
+        }
+
+        const remixedImageBuffer = canvas.toBuffer();
+        const remixedImageAttachment = new AttachmentBuilder(remixedImageBuffer, {name: 'image.png'} );
+
+        await interaction.editReply({content: `Voici l'image modifiée :`, files: [remixedImageAttachment]});
+    }
+}
+
+
+// Fonction pour appliquer l'effet d'inversion des couleurs
+function applyInvertEffect(ctx) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+  
+    // Inversion des couleurs
+    for (let i = 0; i < data.length; i += 4) {
+        data[i] = 255 - data[i]; // Inversion du canal rouge
+        data[i + 1] = 255 - data[i + 1]; // Inversion du canal vert
+        data[i + 2] = 255 - data[i + 2]; // Inversion du canal bleu
+    }
+  
+    ctx.putImageData(imageData, 0, 0);
+}
+  
+// Fonction pour appliquer l'effet de conversion en niveaux de gris
+function applyGrayscaleEffect(ctx) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+  
+    // Conversion en niveaux de gris
+    for (let i = 0; i < data.length; i += 4) {
+        const average = (data[i] + data[i + 1] + data[i + 2]) / 3;
+        data[i] = average; // Rouge
+        data[i + 1] = average; // Vert
+        data[i + 2] = average; // Bleu
+    }
+  
+    ctx.putImageData(imageData, 0, 0);
+}
+
+// Fonction pour appliquer l'effet de sépia
+function applySepiaEffect(ctx) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+  
+    for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+
+        data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
+        data[i + 1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
+        data[i + 2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
+    }
+  
+    ctx.putImageData(imageData, 0, 0);
+}
+  
+// Fonction pour appliquer l'effet de flou
+function applyBlurEffect(ctx) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+  
+    const blurRadius = 5;
+  
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            let red = 0;
+            let green = 0;
+            let blue = 0;
+            let count = 0;
+
+            for (let dy = -blurRadius; dy <= blurRadius; dy++) {
+                for (let dx = -blurRadius; dx <= blurRadius; dx++) {
+                    const nx = x + dx;
+                    const ny = y + dy;
+
+                    if (nx >= 0 && ny >= 0 && nx < width && ny < height) {
+                        const index = (ny * width + nx) * 4;
+                        red += data[index];
+                        green += data[index + 1];
+                        blue += data[index + 2];
+                        count++;
+                    }
+                }
+            }
+
+            const index = (y * width + x) * 4;
+            data[index] = red / count;
+            data[index + 1] = green / count;
+            data[index + 2] = blue / count;
+        }
+    }
+  
+    ctx.putImageData(imageData, 0, 0);
+  }