无法从用户ID获取用户头像

Question

无论我延迟多少时间，这部分都会返回：

错误：给定的图像尚未完成加载

我尝试使用

canvas

制作自定义排行榜，它应该在我在画布中编码的正方形内返回一张带有我自己的 pfp 的图像

let image_source = `./leaderboard.png`

let user = client.users.fetch('537279767108648991')
let bg = new Image()
bg.src = image_source
let av = new Image()
var image_user = []

user.then(function(value) {
  image_user = value.displayAvatarURL({
    extension: `png`,
    dynamic: true,
    format: `png`
  })
})
av.src = image_user

setTimeout(() => {
  if (av.complete == true) {
    canvas_()
  }
}, 1000)

Answer 1

您面临的问题似乎与异步获取用户的个人资料图片并将其设置为基于画布的应用程序中图像元素的源有关。当您尝试将用户的头像设置为图像源时，由于 URL 无法立即可用，因此没有足够的时间来加载。它是在 Promise 中设置的，但您的

setTimeout

函数不会等待此 Promise 解析后再检查头像图像是否已加载。为了确保在画布上绘制头像图像之前加载头像图像，这里有一种更可靠的方法来构建代码。

更可靠的代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let image_source = './leaderboard.png';
let userPromise = client.users.fetch('537279767108648991');

userPromise.then(user => {
  let avatarUrl = user.displayAvatarURL({ extension: 'png', dynamic: true, format: 'png' });
  let bg = new Image();
  let av = new Image();

  av.onload = function() {
    // Draw on canvas only after avatar image has loaded
    canvas_();
  };

  av.onerror = function() {
    console.error('Failed to load avatar image.');
  };

  bg.onload = function() {
    // Assuming you want to draw background first
    // ctx.drawImage(bg, 0, 0);
    av.src = avatarUrl; 
  };

  bg.onerror = function() {
    console.error('Failed to load background image.');
  };

  // Loading background image...
  bg.src = image_source;
}).catch(error => {
  console.error('Failed to fetch user:', error);
});