你的OA系统也是带名字工号水印的吗？web前端实现添加水印
需求场景描述
在一些文件、网页，我们的OA系统中，经常可以看到界面是携带水印的，而且通常水印的内容是工号加名字。水印的内容通常有一个特点，就是不能太显眼，这是为了避免影响读者正常阅读。而像OA系统这样的水印内容是名字加工号的，通常是为了防泄漏（一定程度上），以及泄露后可以通过水印信息快速追查泄露人。
而像一些文档文件带上水印可能是为了打广告和防抄袭。
而像软件，比如一些视频编辑导出软件，水印功能可能被用来迫使用户购买会员，不开会员带水印，相当于帮他们打广告，开会员可去水印，相当于消费取消水印。
仔细一想，不，是回忆，水印功能还是挺常见的，而且被用于各种目的。
实现水印功能思路分析
- 利用canvas创建水印载体画布，并利用旋转等特性制作合适的角度。
- 创建 body 下的 div 元素，并利用 canvas 导出 base64 png有透明度图片，作为背景图。
- 设置该 div 元素的宽高为页面的100%，使用固定定位并设置元素层级z-index为99999，利用背景图repeat属性重复铺满全屏。
完整示例Demo代码
1.demo效果图如下
2.代码部分如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web前端实现水印 Demo</title>
</head>
<body>
<h1 style="text-align: center">水印测试</h1>
<script>
window.onload = function() {
initWatermark("张某三");
};
// 初始化水印，str：水印内容，例如“张三”
function initWatermark(str) {
setWatermark(str);
// 试图窗口大小被调整的时候，重新设置水印
window.onresize = function() {
setWatermark(str);
};
}
function setWatermark(str) {
// 创建canvas元素，并设置相应的属性
let can = document.createElement("canvas");
let context = can.getContext("2d");
can.width = 150;
can.height = 120;
context.rotate(-20 * Math.PI / 180);
context.font = "15px Microsoft YaHei";
context.fillStyle = "rgba(0, 0, 0, 0.10)";
context.textAlign = "center"; // 文字居中方式
context.fillText(str, can.width / 20, can.height);
// 另一行水印
// context.fillText('测试水印', can.width / 20, can.height - 20)
// 创建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 = "3px";
node.style.left = "0px";
node.style.zIndex = "99999";
// 将canvas作为背景图，并设置左上开始，重复铺满全屏
node.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
// 将创建的元素插入body中，作为body的子元素
document.body.appendChild(node);
}
</script>
</body>
</html>
