解决方案-下载

如何给OA系统加上名字工号的水印?其实很简单

2024-03-22 11:17:32 juzhen 0
版本 :
立即下载

在日常工作中,常见一些文件、网页,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);

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

矩阵数字科技-政务微信开发,政务小程序开发,定制化系统开发,跨平台app开发,uniapp开发,驾驶员考试管理系统,昆山软件开发公司,苏州软件开发公司,人工智能应用

首页
产品
新闻
联系