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

在前端开发中，我们可以使用JavaScript来等待多个图像加载到画布并转换为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);
  });

上述代码中，我们首先定义了需要加载的图像URL列表。然后，通过创建Promise对象来加载每个图像，并将这些Promise对象保存在一个数组中。接下来，使用Promise.all()方法等待所有图像加载完成。

在Promise.all()的回调函数中，我们可以获取到所有加载完成的图像对象。我们创建一个新的canvas元素，并将图像绘制到画布上。最后，使用canvas的toDataURL()方法将画布内容转换为base64格式的数据。

你可以将上述代码嵌入到你的项目中，并根据实际需求进行适当的修改和扩展。