vue水印怎么添加

在Vue中添加水印可以通过多种方式实现，包括使用canvas、SVG、第三方库等。以下是一些常见的方法：

1. • 创建一个canvas元素。
   • 在canvas上绘制原始图片。
   • 使用fillText方法在canvas上添加文字水印。
   • 将canvas转换为图片的Base编码，作为图片的src属性值。

   methods: {
    handleAddWaterMarker() {
      let content = "水印文字";
      let imageCon = this.$refs.imageCon; // 获取图片
      let canvas = document.createElement("canvas");
      canvas.width = imageCon.width;
      canvas.height = imageCon.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(imageCon, 0, 0, imageCon.width, imageCon.height);
      ctx.font = "14px Microsoft Yahei";
      ctx.fillStyle = "rgba(255, 255, 255,0.25)";
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      ctx.fillText(content, imageCon.width - (content.length * 14 + 10), imageCon.height - (14 + 10));
      this.image = canvas.toDataURL("image/png");
    }
   }
   

   参考：

使用第三方库watermark-dom：

• 安装watermark-dom库。
• 在组件的mounted钩子中调用watermark.load方法添加水印。

import watermark from 'watermark-dom';
mounted() {
 watermark.load({watermark_txt: "水印内容"});
}

参考：

使用CSS创建背景水印：

• 创建一个包含水印文字的canvas。
• 将canvas转换为图片并设置为元素的背景图。

const initWatermark = () => {
 const canvas = document.createElement('canvas');
 canvas.width = 200;
 canvas.height = 200;
 const ctx = canvas.getContext('2d');
 ctx.font = '30px Arial';
 ctx.rotate(-0.4);
 ctx.fillText('这是水印', canvas.width / 6, canvas.height / 2);
 const img = canvas.toDataURL();
 const main = document.querySelector('.main');
 main.style.backgroundImage = `url(${img})`;
};

参考：

使用Element Plus的Watermark组件：

• 使用Element Plus提供的Watermark组件来添加水印。

<el-watermark
 :content="'这是水印'"
 :rotate="-22"
 :z-index="9"
 />

参考：

为视频添加水印：

• 使用video.js库，并结合videojs-contrib-hls插件来播放视频。
• 在video元素上添加一个绝对定位的div作为水印层。

<video ref="video" class="video-js"></video>
<div class="watermark">水印内容</div>

参考：

选择适合你需求的方法来实现水印功能。