小程序后台返回一张水印图片一张正常图片 前端怎么把水印图片覆盖在正常图片上 js代码实现

可以使用 HTML5 的 Canvas 元素来实现将水印图片覆盖在正常图片上的效果。具体的实现步骤如下：

1. 在 HTML 中创建一个 Canvas 元素，并设置它的宽度和高度与正常图片相同。

2. 获取 Canvas 的上下文对象，并使用该上下文对象加载正常图片和水印图片。

3. 在 Canvas 上下文中使用 drawImage() 方法将正常图片绘制到 Canvas 上。

4. 在 Canvas 上下文中使用 drawImage() 方法将水印图片绘制到 Canvas 上，并设置透明度。

5. 最后，使用 toDataURL() 方法将 Canvas 转换为图片，并将图片的数据 URL 返回给前端。

下面是用 JavaScript 实现以上步骤的代码示例：

function addWatermark(normalImgUrl, watermarkImgUrl) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const normalImg = new Image();
  const watermarkImg = new Image();
  const width = 200; // 正常图片的宽度
  const height = 200; // 正常图片的高度

  canvas.width = width;
  canvas.height = height;

  normalImg.onload = function() {
    ctx.drawImage(normalImg, 0, 0, width, height);
    watermarkImg.onload = function() {
      ctx.globalAlpha = 0.5; // 设置水印透明度
      ctx.drawImage(watermarkImg, 0, 0, width, height);
      const dataUrl = canvas.toDataURL();
      console.log(dataUrl); // 返回图片的数据 URL
    }
    watermarkImg.src = watermarkImgUrl;
  }
  normalImg.src = normalImgUrl;
}

在上面的代码示例中，我们定义了一个 addWatermark() 函数，该函数接受两个参数：正常图片的 URL 和水印图片的 URL。在函数内部，我们创建了一个 Canvas 元素，并设置它的宽度和高度与正常图片相同。然后，我们获取 Canvas 的上下文对象，并使用该上下文对象加载正常图片和水印图片。在加载完正常图片后，我们将其绘制到 Canvas 上。在加载完水印图片后，我们将其绘制到 Canvas 上，并设置透明度。最后，我们使用 toDataURL() 方法将 Canvas 转换为图片，并将图片的数据 URL 返回给前端。