写个给图片加水印的方法

前端添加水印的方法有很多，以下是几种常见且比较有效的方法，并附带 JavaScript 代码示例：

1. 使用 Canvas 绘制水印:

这是最常用的方法，灵活度高，可以自定义水印的样式、位置和透明度。

function addWatermark(imageUrl, watermarkText, options = {}) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 允许跨域图片加载
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;

      ctx.drawImage(img, 0, 0);

      const {
        font = '16px sans-serif',
        color = 'rgba(0, 0, 0, 0.5)',
        position = 'bottom-right',
        offsetX = 10,
        offsetY = 10,
      } = options;

      ctx.font = font;
      ctx.fillStyle = color;

      let x, y;
      switch (position) {
        case 'top-left':
          x = offsetX;
          y = offsetY + parseInt(font, 10); // 偏移量加上字体大小
          break;
        case 'top-right':
          x = canvas.width - ctx.measureText(watermarkText).width - offsetX;
          y = offsetY + parseInt(font, 10);
          break;
        case 'bottom-left':
          x = offsetX;
          y = canvas.height - offsetY;
          break;
        case 'bottom-right':
          x = canvas.width - ctx.measureText(watermarkText).width - offsetX;
          y = canvas.height - offsetY;
          break;
        default:
          x = offsetX;
          y = offsetY;
      }

      ctx.fillText(watermarkText, x, y);

      resolve(canvas.toDataURL());
    };
    img.onerror = reject;
    img.src = imageUrl;
  });
}


// 使用示例:
addWatermark('image-url.jpg', '我的水印', {
  font: '20px Arial',
  color: 'rgba(255, 0, 0, 0.3)',
  position: 'top-left',
}).then(watermarkedImageUrl => {
  const img = document.createElement('img');
  img.src = watermarkedImageUrl;
  document.body.appendChild(img);
}).catch(error => {
  console.error('添加水印失败:', error);
});

2. 使用伪元素(pseudo-element)::before 或 ::after:

这种方法适用于在图片容器上添加简单的文字或图标水印，比较方便，但样式控制不如 Canvas 灵活。

.watermarked-image {
  position: relative;
}

.watermarked-image::before {
  content: '我的水印';
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

/*  HTML */
<div class="watermarked-image">
  <img src="image-url.jpg" alt="Image">
</div>

3. 使用 SVG 作为水印:

SVG 水印可以实现更复杂的图形和效果，并且缩放时不会失真。

//  创建一个 SVG 元素并添加到图片容器中
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.textContent = '我的水印';
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
svg.appendChild(text);

const imageContainer = document.querySelector('.watermarked-image');
imageContainer.appendChild(svg);