vue图片添加水印

使用Cavans实现图片水印的绘制，具体步骤参考如下代码示例：

<template>
  <div>
    <img ref="image" src="https://example.com/image.jpg" alt="Original Image">
  </div>
</template>

<script>
export default {
  mounted() {
    this.addWatermark();
  },
  methods: {
    addWatermark() {
      // 获取原始图片和 canvas 上下文
      const image = this.$refs.image;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // 设置 canvas 的宽度和高度与原始图片相同
      canvas.width = image.width;
      canvas.height = image.height;

      // 将原始图片绘制到 canvas 上
      ctx.drawImage(image, 0, 0, image.width, image.height);

      // 设置水印文本的样式和大小
      const watermarkText = '过路云野';
      const fontSize = 20;
      const textWidth = ctx.measureText(watermarkText).width;
      const textHeight = fontSize;

      // 计算水印应该分布的行数和列数
      const rows = Math.ceil(image.height / (textHeight * 2));
      const cols = Math.ceil(image.width / (textWidth * 2));

      // 在每个位置绘制水印文本
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          const x = j * (textWidth * 2);
          const y = i * (textHeight * 2);
          ctx.font = `${fontSize}px Arial`;
          ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
          ctx.fillText(watermarkText, x, y);
        }
      }

      // 将 canvas 转换为图片的 data URL，然后设置为原始图片的 src 属性
      image.src = canvas.toDataURL('image/png');
    }
  }
}
</script>