discord.js putting an image on another image

Question

I've been trying to make a command that when you send an image or a url of an image it puts that image on another image that I already have in the code and I keep getting errors every time I try changing it to either imageTemp (which is the image you put your image on) or image`` or messageAttachment```. I'll put my code below so you could see what the problem is.

const { MessageAttachment } = require('discord.js');
const Jimp = require('jimp');
const discord = require('discord.js')

module.exports = {
  name: "img",
  aliases: [],
  run: async (client, message, args) => {
    let messageAttachment = message.attachments.size > 0 ? message.attachments.array()[0].url : null
    try {
      let imageTemp = "https://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg"
      let image = await Jimp.read(messageAttachment);
      let buffer = await image.getBufferAsync(Jimp.MIME_JPEG);

    Jimp.read(imageTemp).then(image => {
    image.composite(messageAttachment, 10, 10)
    })

      message.channel.send(new MessageAttachment(buffer));
    } catch (err) {
      console.log(err);
      message.channel.send('Oops, there was an error. Try inputting the command again.');
    }
  },
};

And here's the result and the errors I get https://i.stack.imgur.com/vnTkn.jpg

Can u please show us the Error what you get? – ceqoX Jul 29 '21 at 23:27 — ceqoX, Jul 29 '21 at 23:27
yeah [here](https://imgur.com/a/C6RcTOf) – cupded Jul 29 '21 at 23:30 — cupded, Jul 29 '21 at 23:30
I'm using replit.com by the way – cupded Jul 29 '21 at 23:31 — cupded, Jul 29 '21 at 23:31
@ceqoX I forgot to mention your user sorry – cupded Jul 29 '21 at 23:45 — cupded, Jul 29 '21 at 23:45

score 1 · Accepted Answer · answered Jul 30 '21 at 00:45

1

The Jimp.composite() method accepts a Jimp image object as its first argument. Not an url (messageAttachment) as you are passing in. Also you are saving the image to buffer before you modify it.

And the error you mentioned occurs when messageAttachment is null. You should check and return if the message has no attachments.

const imageTemp = "https://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg";
const messageAttachment = message.attachments.size > 0 ? message.attachments.array()[0].url : null;

// Exit if there is no message attachment present in the message
if (!messageAttachment) return;

// Resolve the temporary image url to Jimp object
const firstImage = await Jimp.read(imageTemp);
// Resolve the message attachment image url to Jimp object
const secondImage = await Jimp.read(messageAttachment);

// Composite the two images together (modifies the firstImage object)
firstImage.composite(secondImage, 10, 10);

// Save the resulting image to buffer
const buffer = await firstImage.getBufferAsync(Jimp.MIME_JPEG);

// Send the buffer as a message attachment
message.channel.send("Combined image:", {files: [{ attachment: buffer }]});

answered Jul 30 '21 at 00:45

Skulaurun Mrusal

2,792
1
15
29

I've gotten another error showing that it couldn't find MIME for Buffer . I'm not sure what that means since I did what you shown – cupded Jul 30 '21 at 01:42
Could you show me the whole error message and where does it occur? – Skulaurun Mrusal Jul 30 '21 at 01:46
Seems like [this](https://github.com/oliver-moran/jimp/issues/643) issue. – Skulaurun Mrusal Jul 30 '21 at 01:56
here's the entire error message https://imgur.com/a/LzgqeX0 – cupded Jul 30 '21 at 01:58
I'm guessing it is throwing the error on line with `Jimp.read()`, is that correct? More precisely the one with `messageAttachment`. Could you do `console.log(messageAttachment)`? And show me what the ouput is? – Skulaurun Mrusal Jul 30 '21 at 02:06
Btw I tested it using, discord.js `^12.5.3` and jimp `^0.16.1`. – Skulaurun Mrusal Jul 30 '21 at 02:08
[Here](https://pastebin.com/NJNXyyJM) is my whole code. You can test the code on your device and then try implement it into your own bot. Sadly, I'm unable to reproduce your issue. – Skulaurun Mrusal Jul 30 '21 at 02:16
I added the console.log thing but it keep giving me the same error – cupded Jul 30 '21 at 02:39
I've got this error now about the url https://imgur.com/a/xfayy2E – cupded Jul 30 '21 at 03:03
@cupded The `console.log` isn't supposed to fix your error, it's supposed to **debug it**. – Skulaurun Mrusal Jul 30 '21 at 03:41
@cupded Show me your current code, how did you implement my code inside your bot. It's the same error, meaning what you are passing to `Jimp.read()` is `null`... – Skulaurun Mrusal Jul 30 '21 at 03:48
https://pastebin.com/zUYPU4iS i changed the Jimp.MIME_JPEG to PNG instead seeing if anything would work too – cupded Jul 30 '21 at 03:51
The code looks ok, did you save your source files and restarted the bot correctly? – Skulaurun Mrusal Jul 30 '21 at 03:58
Yes I restarted the bot and have all the files – cupded Jul 30 '21 at 04:54
I've finally got the code to work, the problem was that the temporary image needed to be in the image assets folder. Not as a link. – cupded Jul 30 '21 at 23:27
That's weird... But I'm glad, that it finally works. – Skulaurun Mrusal Jul 30 '21 at 23:36

discord.js putting an image on another image

1 Answers1