如何给OA系统加上名字工号的水印？其实很简单，WEB前端就能实现添加水印

在日常工作中，常见一些文件、网页，OA系统，看到界面是带水印的，而且通常水印的内容是名字+工号或者手机号后4位。那么系统系统中网页的水印是如何实现的呢？其实很简单，WEB前端就能实现添加水印。
首先我们先来了解一下水印的常识，水印的内容通常有一个特点，就是不能太显眼，这主要是为了避免影响读者正常阅读。而像OA系统这样的水印内容是名字加工号的，通常是为了防泄漏能添加的，以及泄露后可以通过水印信息快速追查泄露人。
下面我们就一起来看看前端代码是如何实现水印功能的，我们的需求是，生成 “勾股OA” 的字体颜色为 “#666666”，字体水平度为15度，背景透明的 PNG 图片，并将其设置为页面水印背景。

实现水印功能思路:

• 首先创建一个 Canvas 元素，并设置其宽度和高度为 200。

• 然后，我们获取 Canvas 的 2D 上下文，并设置文本样式。我们将字体设置为 ‘14px Arial’，字体颜色设置为 ‘#666666’，文本对齐方式设置为 ‘center’，文本基线设置为 ‘middle’。

• 接下来，我们使用 rotate() 方法设置字体的水平度。我们使用 Math.PI 将角度转换为弧度，并将其作为参数传递给 rotate() 方法。

• 然后，我们使用 fillText() 方法在 Canvas 上绘制文本。我们将文本的 x 和 y 坐标设置为 Canvas 宽度和高度的一半，使其居中显示。

• 然后，我们使用 toDataURL() 方法将 Canvas 转换为 PNG 图片，并将其存储在一个变量中。

• 最后，创建 body 下的 div 元素，并利用 canvas 导出 base64 png有透明度图片，作为背景图，设置该 div 元素的宽高为页面的100%，使用固定定位并设置元素层级z-index为999，利用背景图repeat属性重复铺满全屏，css设置该 div 元素的pointer-events属性值none （意思是可穿透图层的鼠标事件）。

以下是具体代码代码：

// 创建一个 Canvas 元素
var canvas = document.createElement('canvas');
canvas.width = 200; // 设置 Canvas 的宽度
canvas.height = 200; // 设置 Canvas 的高度

// 获取 Canvas 的 2D 上下文
var ctx = canvas.getContext('2d');

// 设置文本样式
ctx.font = '20px Arial';
ctx.fillStyle = '#666666';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 设置字体水平度
ctx.rotate(30 * Math.PI / 180);

// 绘制文本
ctx.fillText('勾股OA', canvas.width / 2, canvas.height / 2);

// 将 Canvas 转换为 PNG 图片
var dataURL = canvas.toDataURL('image/png');
// 创建body下的div元素，使用固定定位，将canvas所谓背景图并铺满全屏
let node = document.createElement("div");
node.style.pointerEvents = "none";
// 设置元素固定定位，并将宽高设置为100%,铺满全屏
node.style.position = "fixed";
node.style.width = "100%";
node.style.height = "100%";
node.style.top = "0";
node.style.left = "0";
node.style.opacity = "0.382";
node.style.zIndex = "998";
// 将canvas作为背景图，并设置左上开始，重复铺满全屏
node.style.background = "url(" + dataURL + ") left top repeat";
// 将创建的元素插入body中，作为body的子元素
document.body.appendChild(node);

你需要根据实际情况进行适当的修改和调整。