小程序后台返回一张水印图片一张正常图片 前端怎么把水印图片覆盖在正常图片上 js代码实现
时间: 2023-09-19 08:05:52 浏览: 22
可以使用 HTML5 的 Canvas 元素来实现图片的合并。具体实现步骤如下:
1. 创建两个 Image 对象,分别加载水印图片和正常图片。
```
const watermarkImg = new Image();
watermarkImg.src = '水印图片地址';
const normalImg = new Image();
normalImg.src = '正常图片地址';
```
2. 等待图片加载完成后,在 Canvas 中绘制两张图片。
```
const canvas = document.createElement('canvas');
canvas.width = normalImg.width;
canvas.height = normalImg.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(normalImg, 0, 0);
ctx.drawImage(watermarkImg, 0, 0);
```
3. 在 Canvas 中绘制水印图片。
```
// 设置水印图片的透明度
ctx.globalAlpha = 0.5;
// 设置水印图片的位置
const x = (normalImg.width - watermarkImg.width) / 2;
const y = (normalImg.height - watermarkImg.height) / 2;
// 绘制水印图片
ctx.drawImage(watermarkImg, x, y);
```
4. 将 Canvas 转换成合并后的图片。
```
const mergedImg = new Image();
mergedImg.src = canvas.toDataURL('image/png');
```
5. 将合并后的图片显示在页面上。
```
document.body.appendChild(mergedImg);
```