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

可以使用HTML5的canvas将两张图片合并成一张带水印的图片。以下是实现代码：

// 创建一个canvas元素
var canvas = document.createElement("canvas");

// 设置canvas的宽度和高度
canvas.width = normalImg.width;
canvas.height = normalImg.height;

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

// 在canvas上绘制正常图片
ctx.drawImage(normalImg, 0, 0);

// 在canvas上绘制水印图片
ctx.drawImage(watermarkImg, 0, 0);

// 获取合成后的图片
var mergedImg = canvas.toDataURL("image/png");

// 将合成后的图片显示在页面上
document.getElementById("mergedImg").src = mergedImg;

其中，normalImg和watermarkImg分别是正常图片和水印图片的Image对象，"mergedImg"是显示合成后的图片的img元素的id。

相关问题

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

可以使用CSS实现将水印图片覆盖在正常图片上，具体代码如下：

HTML代码：

<div class="image-container">
  <img src="path/to/normal-image.jpg" alt="Normal Image">
  <img src="path/to/watermark-image.png" alt="Watermark Image" class="watermark">
</div>

CSS代码：

.image-container {
  position: relative;
}

.watermark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5; /* 设置透明度 */
  pointer-events: none; /* 防止水印遮挡正常图片 */
}

解释：

- 通过设置 `.image-container` 容器的 `position` 属性为 `relative`，将其变为相对定位的容器，使得内部的绝对定位元素 `.watermark` 以此为参照进行定位。
- 设置 `.watermark` 元素的 `position` 属性为 `absolute`，使其脱离文档流并相对于 `.image-container` 容器进行绝对定位。
- 通过设置 `.watermark` 元素的 `top` 和 `left` 属性为 `0`，将其定位在 `.image-container` 容器的左上角。
- 通过设置 `.watermark` 元素的 `opacity` 属性为 `0.5`，将其透明度设置为50%，使得正常图片可以透过水印图片显露出来。
- 通过设置 `.watermark` 元素的 `pointer-events` 属性为 `none`，禁止水印图片响应鼠标事件，防止其遮挡正常图片。

小程序后台返回一张水印图片一张正常图片 前端怎么把水印图片覆盖在正常图片上 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 返回给前端。