如何在JavaScript中为图片添加水印功能？

在JavaScript中为图片添加水印功能通常涉及到前端图像处理技术，可以使用HTML5的Canvas API或者第三方库如`html2canvas`、`fabric.js`等。以下是基本步骤：

1. **HTML部分**:
创建一个包含图片和水印的HTML结构，例如：

   <img id="image" src="your-image.jpg">
   <canvas id="watermark-canvas"></canvas>

2. **JavaScript部分**:
- **获取元素**:
使用`document.getElementById()`获取图片和canvas元素。
- **绘制水印**:

     var canvas = document.getElementById('watermark-canvas');
     var ctx = canvas.getContext('2d');
     
     // 定义水印文本和位置
     var watermarkText = 'Your Watermark';
     var x = canvas.width - watermarkText.length * 10; // 水印偏移X
     var y = canvas.height / 2; // 高度居中
     
     ctx.font = '24px Arial'; // 设置字体大小
     ctx.fillStyle = '#ffffff'; // 设置颜色
     ctx.textAlign = 'center'; // 对齐方式
     ctx.fillText(watermarkText, x, y);

- **将水印画布转换为图片**:

     var watermarkedImage = canvas.toDataURL();

3. **应用水印到原图**:
可以将水印后的图片URL设置为原图片的src属性，或者创建一个新的`<img>`标签插入到DOM中。

    var imageElement = document.getElementById('image');
    imageElement.src = watermarkedImage;