JavaScript实现水印效果

效果

实现思路

1. 利用canvas绘制出文字
2. 将canvas作为遮罩层背景图, 将背景x轴和y轴重复

实现步骤

动态生成canvas并画出文字

1. 生成canvas节点，设置宽高
2. 平移canvas对象，然后旋转（可以理解成，设置旋转基点，默认是根据左上角旋转的）
3. 设置字体样式
4. 将文字绘制到canvas上

const canvas = document.createElement("canvas");
canvas.width = len * fontSize; // canvas宽度, 目前是根据文字长度和大小来调整的, 自己可依照具体需求变动
canvas.height = height + fontSize * 2.8; // canvas高度, 依据需求调整const context = canvas.getContext("2d");
context.translate(0, canvas.height / 2); // 改变旋转基点
context.rotate((-rotate * Math.PI) / 180); // 进行旋转, 传过来的旋转角度
context.font = `${fontSize}px Vedana`; // 设置字体
context.fillStyle = color; // 设置文字颜色// 将需要的文本, 绘制到canvas上面
context.fillText(text, 10, canvas.height / 2 - 100);

将canvas做为遮罩层背景图

1. 生成一个遮罩层的节点并设置样式
2. 将上面生成的canvas转成base64的图片，然后作为遮罩层的背景图片（toDataURL方法）
3. 最后追加到body中

// 生成水印遮罩层
const div = document.createElement("div");
div.id = DOM_ID;
div.style.pointerEvents = "none";
div.style.position = "fixed";
div.style.zIndex = zIndex;
div.style.left = "-32%";
div.style.top = "-32%";
div.style.opacity = opacity;
div.style.width = "150%";
div.style.height = "150%";
div.style.background = `url('${canvas.toDataURL("images/png")}')repeat left top`;document.body.appendChild(div);

防止篡改水印

利用MutationObserverAPI来对遮罩层做监听, 防止属性修改或者dom节点被人为的删除

MDN: MutationObserver

/*** 监听dom变化, 防止水印被篡改*/
static observeDomChange = (waterMarkDom, options) => {const callback = (mutationsList, observer) => {for (const mutation of mutationsList) {/*** 水印节点的属性发生了变动*/if (mutation.target === waterMarkDom) {this.setWaterMark(); // 重新生成水印observer.disconnect(); // 停止观察}/*** 强行手动删除了水印节点*/if (mutation.removedNodes.length && mutation.removedNodes[0] === waterMarkDom) {this.setWaterMark(this.options); // 重新生成水印observer.disconnect(); // 停止观察}}};this.observer = new MutationObserver(callback);/** 监听body */this.observer.observe(document.querySelector("body"), {attributes: true, // 观察属性变动childList: true, // 观察目标子节点的变化，是否有添加或者删除subtree: true, // 观察后代节点，默认为 false});
};

所有代码

const DOM_ID = "yss-cj-create";/*** 水印的默认属性*/
const DEFAULT_OPTIONS = {text: "cxk  管理员  20230424",width: 520, // 水印块的宽度height: 280, // 水印块的高度rotate: 20, // 水印块的旋转角度fontSize: 28, // 文字大小color: "#666", // 文字颜色opacity: "0.3", // 遮罩层的透明度zIndex: "9999999999", // 遮罩层的层级
};class Watermark {options = {};observer = null;/*** 生成水印*/static setWaterMark = (options = {}) => {const waterDom = document.getElementById(DOM_ID);if (waterDom !== null) {// 每次重新绘制之前, 需要判断是否已经存在, 如果存在了就先删除, 再来重新绘制document.body.removeChild(waterDom);}const latestOptions = { ...DEFAULT_OPTIONS, ...options };this.options = latestOptions;const {text,width, // 宽度是根据提供的文字大小和文字长度计算出来的, 这里就用不上了height, // 水印块的高度rotate, // 水印块的旋转角度fontSize, // 文字大小color, // 文字颜色opacity, // 遮罩层的透明度zIndex, // 遮罩层的层级} = latestOptions;const len = text.length;const canvas = document.createElement("canvas");canvas.width = len * fontSize;canvas.height = height + fontSize * 2.8;const context = canvas.getContext("2d");context.translate(0, canvas.height / 2);context.rotate((-rotate * Math.PI) / 180);context.font = `${fontSize}px Vedana`; // 设置字体context.fillStyle = color; // 设置文字颜色// 将需要的文本, 绘制到canvas上面context.fillText(text, 10, canvas.height / 2 - 100);// 生成水印遮罩层const div = document.createElement("div");div.id = DOM_ID;div.style.pointerEvents = "none";div.style.position = "fixed";div.style.zIndex = zIndex;div.style.left = "-32%";div.style.top = "-32%";div.style.opacity = opacity;div.style.width = "150%";div.style.height = "150%";div.style.background = `url('${canvas.toDataURL("images/png")}')repeat left top`;document.body.appendChild(div);/*** 监听水印的dom变化*/this.observeDomChange(div);};/*** 去除水印*/static removeWatermark = () => {const dom = document.getElementById(DOM_ID);if (dom !== null) {document.body.removeChild(dom);}};/*** 监听dom变化, 防止水印被篡改*/static observeDomChange = (waterMarkDom, options) => {const callback = (mutationsList, observer) => {for (const mutation of mutationsList) {/*** 水印节点的属性发生了变动*/if (mutation.target === waterMarkDom) {this.setWaterMark(); // 重新生成水印observer.disconnect(); // 停止观察}/*** 强行手动删除了水印节点*/if (mutation.removedNodes.length && mutation.removedNodes[0] === waterMarkDom) {this.setWaterMark(this.options); // 重新生成水印observer.disconnect();}}};this.observer = new MutationObserver(callback);/** 监听body */this.observer.observe(document.querySelector("body"), {attributes: true, // 观察属性变动childList: true, // 观察目标子节点的变化，是否有添加或者删除subtree: true, // 观察后代节点，默认为 false});};
}Watermark.setWaterMark();

参考资料:

• https://github.com/zifeifish/watermark-package

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！