在前端开发中，给图片加水印通常可以通过HTML、CSS和JavaScript来实现。不过，请注意，前端添加的水印可能容易被用户或工具移除。为了更强的保护，通常建议在服务器端进行水印处理。
以下是一个简单的前端JavaScript示例，使用HTML5的Canvas API来给图片添加水印：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片加水印示例</title>
</head>
<body><input type="file" id="imageInput" accept="image/*"><canvas id="canvas"></canvas><script>const imageInput = document.getElementById('imageInput');const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');imageInput.addEventListener('change', function(e) {const file = e.target.files[0];const reader = new FileReader();reader.onload = function(event) {const img = new Image();img.onload = function() {// 设置canvas大小与图片一致canvas.width = img.width;canvas.height = img.height;// 绘制原始图片ctx.drawImage(img, 0, 0, img.width, img.height);// 设置水印文本和样式const watermarkText = 'Watermark';ctx.font = '30px Arial';ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; // 白色半透明ctx.textAlign = 'center';ctx.textBaseline = 'middle';// 在图片上绘制水印文本，位置可以根据需要调整ctx.fillText(watermarkText, img.width / 2, img.height / 2);};img.src = event.target.result; // 设置图片源为读取的文件数据};reader.readAsDataURL(file); // 读取文件数据为DataURL格式});</script>
</body>
</html>
这个示例中，我们创建了一个文件输入元素和一个Canvas元素。当用户选择一个图片文件后，我们使用FileReader API读取文件数据，并将其加载到一个Image对象中。然后，我们在Canvas上绘制这个Image对象，并在其上添加水印文本。最后，水印图片会显示在Canvas元素中。
请注意，这个示例只是一个简单的演示，实际应用中可能需要更多的错误处理和优化。另外，前端添加的水印可能不够安全，因此请根据实际情况选择是否使用前端添加水印的方案。
