使用html2canvans截图的页面如何添加图片水印具体代码流程
时间: 2024-03-11 15:49:40 浏览: 20
添加图片水印可以通过以下步骤完成:
1. 在需要添加水印的图片上叠加水印图片。
2. 将叠加水印图片后的结果渲染到 canvas 上。
3. 将 canvas 内容导出为图片。
以下是具体的代码流程:
```javascript
// 获取需要添加水印的图片
const img = document.getElementById('img');
// 创建一个 canvas 元素
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// 将图片渲染到 canvas 上
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// 加载水印图片
const watermarkImg = new Image();
watermarkImg.src = 'watermark.png';
// 等待水印图片加载完毕后叠加水印
watermarkImg.onload = function() {
// 叠加水印
ctx.drawImage(watermarkImg, 0, 0, watermarkImg.width, watermarkImg.height, 0, 0, img.width, img.height);
// 将 canvas 内容导出为图片
const imgData = canvas.toDataURL('image/png');
// 此时 imgData 包含了添加水印后的图片内容
}
```
上述代码中,`img` 是需要添加水印的图片元素,`watermarkImg` 是水印图片,`canvas` 是用于渲染图片和水印的 canvas 元素,`ctx` 是 canvas 的 2D 上下文对象,用于操作 canvas 内容。在水印图片加载完成后,我们将水印图片叠加到 canvas 上,并将 canvas 内容导出为图片,最终得到的 `imgData` 是包含了添加水印后的图片内容的 Base64 编码字符串。