如何在node canvas中让绘制的图片尺寸固定为128px（Discord机器人场景）

问题根源 #

你当前代码绘制头像时的宽高是基于加载到的头像原始尺寸乘以0.9计算得到的，Discord默认头像与用户自定义头像的原始返回尺寸不一致，就会导致最终绘制出来的大小不统一。

解决方法 #

你只需要修改两处代码即可实现所有头像统一绘制为128px：

• 拉取头像时在参数中添加size: 128，直接获取对应尺寸的头像资源，减少不必要的性能损耗
• 调用drawImage方法时直接固定宽高参数为128，不再基于原图尺寸做比例计算

修改后代码 #

client.on("message", async (message) => {
  if (message.author.bot) return;
  if (message.content.startsWith("R!grave")) {
    const canvas = Canvas.createCanvas(800, 450);
    let ctx = canvas.getContext('2d');
    let pooh = await Canvas.loadImage('./ez.jpg');
    ctx.drawImage(pooh, 0, 0, canvas.width, canvas.height);

    const [first, second] = [...message.mentions.users.values()]

    if (!first || !second)
      return message.channel.send('You need to mention two users!');

    // 拉取头像时指定size为128
    let avatar1 = await Canvas.loadImage(first.displayAvatarURL({ dynamic: false, format: 'png', size: 128 }));
    // 绘制时固定宽高为128
    ctx.drawImage(avatar1, 106, 34, 128, 128);
    let avatar2 = await Canvas.loadImage(second.displayAvatarURL({ dynamic: false, format: 'png', size: 128 }));
    ctx.drawImage(avatar2, 355, 91, 128, 128);

    let attachment = new Discord.MessageAttachment(canvas.toBuffer(), 'example.png')

    return message.channel.send(attachment);
  }
});

如果你需要的实际绘制尺寸是128px的90%也就是115px，直接把上面绘制参数里的128替换成115即可，所有头像都会保持统一尺寸。

内容的提问来源于stack exchange，提问作者lelbro420