0

I'm trying to overlay 1 image over the top of another but cant seem to work it out - my code throws no errors but doesn't output the requested image modification. Can someone point me in the right direction?

Here is my code

const user = message.mentions.users.first();

if (args[0] === undefined) {
    message.channel.send("You can't jail yourself, dummy!")
} else {
    var images = [user.avatarURL({ format: 'png', dynamic: true, size: 256 }), 'https://i.pinimg.com/originals/7b/51/9a/7b519a3422f940011d34d1f9aa75f683.png']
    var jimps = []
    //turns the images into readable variables for jimp, then pushes them into a new array
    for (var i = 0; i < images.length; i++){
        jimps.push(jimp.read(images[i]))
    }
    //creates a promise to handle the jimps
    await Promise.all(jimps).then(function(data) {
        return Promise.all(jimps)
    }).then(async function(data){
        // --- THIS IS WHERE YOU MODIFY THE IMAGES --- \\
        data[0].composite(data[1], 0, 0) //adds the second specified image (the jail bars) on top of the first specified image (the avatar). "0, 0" define where the second image is placed, originating from the top left corner
        //you CAN resize the second image to fit the first one like this, if necessary. The "100, 100" is the new size in pixels.
        data[1].resize(100,100)

        //this saves our modified image
        data[0].write(`\Users\jmoor\Pictures\JIMP Test\test.png`)
    })
    message.channel.send(`${user.username} has been jailed!`, {file: `\Users\jmoor\Pictures\JIMP Test\test.png`})
}

I have defined jimp above and also am using a command handler I made.

Rob
  • 14,746
  • 28
  • 47
  • 65
Joe Moore
  • 2,031
  • 2
  • 8
  • 29
  • Is file path correct? Also usually JS can't access other dir resources (CORS) – Justinas Mar 28 '20 at 17:29
  • The file path is correct, yes - unless I need to remove the test.png, but I tried that earlier. As far as JS not accessing other dir resources what do you mean? – Joe Moore Mar 28 '20 at 17:31
  • OP: Just for clarity, @Justinas is referring to its use in browsers. Node.js apps are a different story. – slothiful Mar 28 '20 at 20:38

1 Answers1

1

Use this:

    const user = message.mentions.users.first() //get The first user mentioned
    if (!user) return message.reply("Who do you wanna send to jail?")//return if no user was mentioned
    var bars = "https://i.pinimg.com/originals/7b/51/9a/7b519a3422f940011d34d1f9aa75f683.png"
    var pfp = user.avatarURL({ format: 'png', dynamic: true, size: 128 }) //get link of profile picture
    var image = await Jimp.read(pfp)//read the profile picture, returns a Jimp object
    //Composite resized bars on profile picture
    image.composite((await Jimp.read(bars)).resize(128, 128), 0, 0)
    //create and attachment using buffer from edited picture and sending it
    var image = new Discord.MessageAttachment(await image.getBufferAsync(Jimp.MIME_PNG))
    message.reply(image)
Tomáš Kordoš
  • 329
  • 2
  • 12