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

可以使用canvas来实现多张图片合成一个图片，并将其转换为base64格式的数据。具体步骤如下：

1. 创建一个canvas元素，并设置其宽高为需要生成的合成图片的宽高。

2. 创建一个Image对象，用于加载需要合成的图片。可以使用多个Image对象来加载多张图片。

3. 在Image对象加载完成后，将其绘制到canvas中，可以使用canvas的drawImage方法。

4. 将canvas转换为base64格式的数据，可以使用canvas的toDataURL方法。需要注意的是，toDataURL方法的第一个参数可以指定图片的格式，默认为png格式。

以下是一个简单的示例代码：

// 创建canvas元素
var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;

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

// 创建Image对象
var img1 = new Image();
img1.src = 'image1.jpg';
img1.onload = function() {
  // 绘制第一张图片
  ctx.drawImage(img1, 0, 0);
  
  // 创建第二张图片
  var img2 = new Image();
  img2.src = 'image2.jpg';
  img2.onload = function() {
    // 绘制第二张图片
    ctx.drawImage(img2, 400, 0);
    
    // 将canvas转换为base64格式的数据
    var base64Data = canvas.toDataURL();
    console.log(base64Data);
  };
};

在上面的代码中，我们创建了一个800x600的canvas元素，并使用两张图片分别在左侧和右侧绘制了出来。最后，我们将canvas转换为base64格式的数据，并输出到控制台中。