使用JavaScript合并两幅图像以实现水印

// 创建两个图像对象
var image1 = new Image();
var image2 = new Image();

// 设置图像的src属性
image1.src = 'image1.jpg';
image2.src = 'image2.jpg';

// 等待两幅图像加载完成
Promise.all([image1.onload, image2.onload]).then(function() {
  // 创建一个canvas元素
  var canvas = document.createElement('canvas');
  canvas.width = image1.width;
  canvas.height = image1.height;

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

  // 绘制第一幅图像
  ctx.drawImage(image1, 0, 0);

  // 绘制第二幅图像
  ctx.drawImage(image2, 0, 0);

  // 添加水印
  ctx.font = '20px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fillText('Watermark', 10, 30);

  // 获取合并后的图像数据URL
  var mergedImage = canvas.toDataURL();

  // 在页面上展示合并后的图像
  var resultImage = document.createElement('img');
  resultImage.src = mergedImage;
  document.body.appendChild(resultImage);
});