如何等待多个图像加载到画布并转换为base64？

// 定义需要加载的图像URL列表
const imageURLs = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
];

// 创建一个Promise数组，用于保存每个图像加载的Promise对象
const imagePromises = imageURLs.map(url => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load image ${url}`));
    img.src = url;
  });
});

// 使用Promise.all()等待所有图像加载完成
Promise.all(imagePromises)
  .then(images => {
    // 所有图像加载完成后的处理逻辑
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 设置画布尺寸
    canvas.width = images[0].width;
    canvas.height = images[0].height;

    // 将图像绘制到画布上
    images.forEach(image => {
      ctx.drawImage(image, 0, 0);
    });

    // 将画布内容转换为base64
    const base64 = canvas.toDataURL();

    // 在这里可以使用base64数据进行后续操作，如显示在页面上或发送到服务器等
    console.log(base64);
  })
  .catch(error => {
    // 图像加载失败的处理逻辑
    console.error(error);
  });