discord.js - Imagine an app•12mo ago

embedding an manipulated image inside the box

i tried to manipulate an image and adding it to the embedded box as an attachment url but its not inside the embedded box like here

8 Replies

d.js toolkit•12mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - ✅ Marked as resolved by staff

unddasnochOP•12mo ago

im using discord.js v14 and canvas btw

Unknown User•12mo ago

Message Not Public

unddasnochOP•12mo ago

    const canvas = createCanvas(400, 200);
    const ctx = canvas.getContext('2d');

    const backgroundImage = await loadImage('./src/background.png');
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

    const userAvatar = await loadImage(member.user.displayAvatarURL({ extension: "png" }));
    ctx.beginPath();
    ctx.arc(200, 100, 70, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(userAvatar, 130, 30, 140, 140);

    const attachedImage = new AttachmentBuilder(canvas.toBuffer(), 'welcomeImage.png');

    const embedWelcomeBox = new EmbedBuilder()
        .setTitle(`${member.displayName}, Welcome to this great server`)
        .setImage('attachment://welcomeImage.png')
        .setColor(0xc36bdb)

    channel.send({ embeds: [embedWelcomeBox], files: [attachedImage] });

    const canvas = createCanvas(400, 200);
    const ctx = canvas.getContext('2d');

    const backgroundImage = await loadImage('./src/background.png');
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

    const userAvatar = await loadImage(member.user.displayAvatarURL({ extension: "png" }));
    ctx.beginPath();
    ctx.arc(200, 100, 70, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(userAvatar, 130, 30, 140, 140);

    const attachedImage = new AttachmentBuilder(canvas.toBuffer(), 'welcomeImage.png');

    const embedWelcomeBox = new EmbedBuilder()
        .setTitle(`${member.displayName}, Welcome to this great server`)
        .setImage('attachment://welcomeImage.png')
        .setColor(0xc36bdb)

    channel.send({ embeds: [embedWelcomeBox], files: [attachedImage] });

d.js docs•12mo ago

Files in embeds should be attached via the message option object and referenced in the embed:

const attachment = new AttachmentBuilder('./image.png', { name: 'image1.png' });
const embed = new EmbedBuilder()
  .setTitle('Attachments')
  .setImage(`attachment://${attachment.name}`);

channel.send({
  embeds: [embed],
  files: [attachment]
});

const attachment = new AttachmentBuilder('./image.png', { name: 'image1.png' });
const embed = new EmbedBuilder()
  .setTitle('Attachments')
  .setImage(`attachment://${attachment.name}`);

channel.send({
  embeds: [embed],
  files: [attachment]
});

Unknown User•12mo ago

Message Not Public

unddasnochOP•12mo ago

yeah that was the problem thanks 😮

Unknown User•12mo ago

Message Not Public

Gaming

Programming

embedding an manipulated image inside the box