canvas toDataURL转base64实现多张图片合成一个图片

要将多张图片合成一个图片，需要先将这些图片绘制到一个 canvas 上，然后使用 `toDataURL` 方法将 canvas 转换为 base64 格式的数据。

以下是实现多张图片合成一个图片的示例代码：

// 创建一个 canvas 元素
var canvas = document.createElement('canvas');
canvas.width = 600; // 设置 canvas 的宽度
canvas.height = 600; // 设置 canvas 的高度

// 获取 canvas 的上下文
var ctx = canvas.getContext('2d');

// 加载多张图片
var img1 = new Image();
img1.src = 'image1.png';
var img2 = new Image();
img2.src = 'image2.png';
var img3 = new Image();
img3.src = 'image3.png';

// 所有图片加载完成后绘制到 canvas 上
Promise.all([
  new Promise((resolve, reject) => { img1.onload = resolve; }),
  new Promise((resolve, reject) => { img2.onload = resolve; }),
  new Promise((resolve, reject) => { img3.onload = resolve; })
]).then(() => {
  // 绘制第一张图片
  ctx.drawImage(img1, 0, 0, 200, 200);

  // 绘制第二张图片
  ctx.drawImage(img2, 200, 0, 200, 200);

  // 绘制第三张图片
  ctx.drawImage(img3, 400, 0, 200, 200);

  // 将 canvas 转换为 base64 格式的数据
  var base64Data = canvas.toDataURL();

  // 在页面上显示合成后的图片
  var img = document.createElement('img');
  img.src = base64Data;
  document.body.appendChild(img);
});

在这个示例中，首先创建一个 canvas 元素，然后获取 canvas 的上下文。接着加载多张图片，并在所有图片加载完成后将它们绘制到 canvas 上。最后，使用 `toDataURL` 方法将 canvas 转换为 base64 格式的数据，并将它显示在页面上。