前端页面添加水印

前端页面添加水印

主要功能说明：

1. 这是一个用于添加页面水印的工具函数
2. 水印会以半透明的形式显示在页面上，并且会重复平铺
3. 水印文字会有-15度的倾斜角度
4. 水印会覆盖整个页面，但不会影响页面的正常交互
5. 每次调用函数时会先删除已存在的水印，再添加新的水印
6. 使用canvas绘制水印，然后转换为背景图片，这样可以提高性能
7. 水印会固定显示在页面上，即使页面滚动也不会移动

watermark.js

/*** 为页面添加水印的函数* @param {string} text - 水印显示的文本内容*/
export function addWatermark(text) {// 删除已存在的水印，防止重复添加const oldWatermark = document.getElementById('watermark')if (oldWatermark) {oldWatermark.remove()}// 创建canvas元素用于绘制水印const canvas = document.createElement('canvas')// 设置canvas的宽度和高度，这将决定单个水印的大小canvas.width = 300canvas.height = 150// 获取canvas的2D绘图上下文const ctx = canvas.getContext('2d')// 配置水印文字的样式ctx.font = '16px Arial'  // 设置字体大小和字体族ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'  // 设置文字颜色和透明度ctx.rotate(-15 * Math.PI / 180)  // 将文字旋转-15度（逆时针）ctx.fillText(text, 0, 100)  // 在canvas上绘制文本// 创建一个div元素作为水印容器const div = document.createElement('div')div.id = 'watermark'  // 设置id，方便后续查找和删除div.style.position = 'fixed'  // 固定定位，相对于浏览器窗口div.style.top = '0'  // 顶部对齐div.style.left = '0'  // 左侧对齐div.style.width = '100%'  // 宽度铺满div.style.height = '100%'  // 高度铺满div.style.background = `url(${canvas.toDataURL()}) repeat`  // 将canvas转换为图片URL并设置为重复背景div.style.pointerEvents = 'none'  // 使水印不影响页面交互div.style.zIndex = '9999'  // 设置较高的层级，确保水印显示在其他元素之上// 将水印容器添加到页面的body元素中document.body.appendChild(div)
} 

使用实例：

//页面导入
import { addWatermark } from '@/utils/common/watermark' // 需要创建这个工具函数//添加水印
addWatermark('机密文件')