vue怎么实现页面水印

实现页面水印的方法

使用CSS背景图

通过CSS的background-image属性为页面添加水印背景。可以创建一个半透明的PNG图片作为水印，然后将其设置为页面背景。

body {
  background-image: url('watermark.png');
  background-repeat: repeat;
  opacity: 0.5;
}

使用Canvas动态生成水印

通过Canvas动态绘制水印文字或图案，并将其作为背景插入到页面中。

function createWatermark(text) {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 100;
  const ctx = canvas.getContext('2d');
  ctx.font = '16px Arial';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.rotate(-0.2);
  ctx.fillText(text, 10, 50);
  return canvas.toDataURL('image/png');
}

document.body.style.backgroundImage = `url(${createWatermark('Watermark')})`;

使用Vue自定义指令

通过Vue自定义指令实现水印功能，可以动态控制水印的显示和内容。

Vue.directive('watermark', {
  inserted(el, binding) {
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 100;
    const ctx = canvas.getContext('2d');
    ctx.font = '16px Arial';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.rotate(-0.2);
    ctx.fillText(binding.value, 10, 50);
    el.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
  }
});

使用第三方库

可以使用第三方库如vue-watermark来快速实现水印功能。

import VueWatermark from 'vue-watermark';

Vue.use(VueWatermark, {
  text: 'Watermark',
  opacity: 0.1,
  width: 200,
  height: 100
});

注意事项

• 水印的透明度不宜过高，以免影响页面内容的可读性。
• 动态生成的水印可以通过调整rotate角度和fillStyle颜色来增强防篡改效果。
• 对于需要保护的内容，水印应覆盖整个页面，防止被轻易移除。