一：概述

在项目开发过程中，有时候需要实现特定水印功能，不同用户查看时有特殊水印，如果泄漏资源方便查到到人，那么，有那些实现方式呢？

二：方式

1：使用css伪类元素，通过::before 或 ::after 伪元素，可以在网页元素的前面或后面添加水印

 <style>
      .watermarked-content {
        position: relative;
        width: 100%;
        height: 400px;
        background-color: #eaeaea;
        margin: 20px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        text-align: center;
        --watermark-text: 'Default Watermark'; /* 默认水印文本 */

        /* 使用 ::before 伪元素创建水印文字 */
        background-image: repeating-linear-gradient(
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px
          ),
          repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px
          );
        background-size: 200px 200px;
        background-position: center;
      }

      /* 设置水印伪元素 */
      .watermarked-content::before {
        content: var(--watermark-text); /* 动态使用 CSS 变量作为水印文本 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        color: rgba(0, 0, 0, 0.1);
        font-size: 20px;
        transform: rotate(-30deg); /* 旋转水印 */
        pointer-events: none;
        white-space: nowrap;
        z-index: 1;
        opacity: 1;
        background-repeat: repeat;
        background-size: 200px 100px;
      }
    </style>

 // JavaScript 动态修改水印文本
      function changeWatermark(text) {
        const watermarkedElement =
          document.getElementById('watermarkedElement');
        // 使用CSS变量来改变伪元素中的文本
        watermarkedElement.style.setProperty('--watermark-text', `"${text}"`);
      }

      // 默认设置水印
      changeWatermark('Initial Watermark');

2：纯html元素（纯div+Dom元素）,也就是生成一个水印块，加一个透明度，不遮挡页面，然后进行定位旋转，利用css属性userSelect，让文字不能被选中

// 文本内容
<div class="app">
        <h1>小白</h1>
        <p>hello</p>
</div>
<script setup>
import { nextTick, ref } from "vue";

nextTick(()=>{
function cssHelper(el, prototype) {
  for (let i in prototype) {
    el.style[i] = prototype[i]
  }
}
const item = document.createElement('div')
item.innerHTML = '小白博客'

cssHelper(item, {
  position: 'absolute',
  top: `50px`,
  left: `50px`,
  fontSize: `16px`,
  color: '#000',
  lineHeight: 1.5,
  opacity: 0.1,
  transform: `rotate(-15deg)`,
  transformOrigin: '0 0',
  userSelect: 'none',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
})
document.body.appendChild(item)

})

</script>

3：svg，主要是生成背景图片

<template>
  <div>
   
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
function createWaterMark() {
  const svgStr =
    `<svg xmlns="http://www.w3.org/2000/svg" width="180px" height="100px">
      <text x="0px" y="30px" dy="16px"
      text-anchor="start"
      stroke="#000"
      stroke-opacity="0.1"
      fill="none"
      transform="rotate(-20)"
      font-weight="100"
      font-size="16"
      >
      	小白博客
      </text>
    </svg>`;
  return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
}

nextTick(()=>{
	const watermakr = document.createElement('div');
	watermakr.className = 'watermark';
	watermakr.style.height='100vh'
	watermakr.style.backgroundImage = `url(${createWaterMark()})`
	document.body.appendChild(watermakr);
	
})

</script>


<style scoped></style>

4：canvas，绘制一个水印，然后拿到文件流转成base64，进行显示

<template>
  <div>
   
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";

nextTick(()=>{
function createWaterMark() {
  const angle = -20;
  const txt = '小白博客'
  const canvas = document.createElement('canvas');
  canvas.width = 100;
  canvas.height = 100;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 180, 100);
  ctx.fillStyle = '#000';
  ctx.globalAlpha = 0.1;
  ctx.font = `16px serif`
  ctx.rotate(Math.PI / 180 * angle);
  ctx.fillText(txt, 0, 50);
  return canvas.toDataURL();
}
const watermakr = document.createElement('div');
watermakr.className = 'watermarks';
watermakr.style.height='100vh'
watermakr.style.backgroundImage = `url(${createWaterMark()})`
document.body.appendChild(watermakr);

})

</script>

<style scoped>
	.watermark {
	    position: fixed;
	    top: 0px;
	    right: 0px;
	    bottom: 0px;
	    left: 0px;
	    pointer-events: none;
	    background-repeat: repeat;
	}
	

</style>

5：使用三方库watermark-plus

npm i watermark-plus
const waterMark = new WaterMark({
  content: '水印内容',
  width: 200,
  height: 100,
  alpha: 0.2,
  background: 'yellow', // 当前这个参数不支持，需要改源码
  bAlpha: background == '#ffffff' ? '0' : 0.18,
})