为网页添加全屏水信息水印,效果图:
可自行调整 密度,大小,字体,文字
// 创建一个覆盖整个页面的 div
const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'fixed';
watermarkDiv.style.top = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.pointerEvents = 'none'; // 让水印元素不影响页面的交互
watermarkDiv.style.zIndex = '9999'; // 确保水印位于页面最上层
// 创建 canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 250;
canvas.height = 200;
const waterMarkText = '用户名'+'172***'; // 设置水印文本
// 设置文本样式
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.07;
ctx.font = '14px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 10);
ctx.fillText(waterMarkText, 0, 0);
// 将 canvas 转换为 data URL 并作为背景图片
const dataUrl = canvas.toDataURL();
watermarkDiv.style.backgroundImage = `url(${dataUrl})`;
// 设置水印重复铺满整个页面
watermarkDiv.style.backgroundRepeat = 'repeat';
watermarkDiv.style.backgroundPosition = 'center';
// 将水印元素添加到 body
document.body.appendChild(watermarkDiv);