利用js给图片添加水印

在 JavaScript 中，给图片添加水印通常涉及到操作 HTML 元素以及使用 Canvas API。以下是一个简单的步骤和示例代码来实现这个功能：

1. 首先，你需要获取要添加水印的图片元素（通常是 `img` 标签）和一个用于显示水印的文字元素（比如 `div`）。

const imgElement = document.getElementById('image');
const watermarkElement = document.getElementById('watermark-text');

2. 创建一个 canvas 元素，设置其宽度和高度等于图片的尺寸，然后将其转换为 ImageData 对象以便进行处理。

const canvas = document.createElement('canvas');
canvas.width = imgElement.naturalWidth;
canvas.height = imgElement.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(imgElement, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

3. 接下来，在 canvas 上绘制水印文字。你可以调整字体大小、颜色和位置以适应图片。这里假设水印位于右下角：

const fontColor = 'rgba(255, 255, 255, 0.8)';
const fontSize = 20; // 可以根据需求调整

// 获取文字的大小
const textMetrics = ctx.measureText(watermarkElement.innerText);
const textWidth = textMetrics.width;
const textHeight = fontSize;

// 计算水印位置
const x = canvas.width - textWidth - 10; // 偏移量可以根据喜好调整
const y = canvas.height - textHeight - 10;

// 绘制水印
ctx.font = `${fontSize}px Arial`;
ctx.fillStyle = fontColor;
ctx.fillText(watermarkElement.innerText, x, y);

4. 将处理后的 ImageData 重新应用到原 canvas 上，然后创建一个新的 `img` 元素来显示带有水印的图像。

ctx.putImageData(imageData, 0, 0);

// 创建新的 img 元素
const watermarkedImage = new Image();
watermarkedImage.src = canvas.toDataURL();

// 将水印后的图片插入到 DOM
document.body.appendChild(watermarkedImage);