前端：前端开发中，实现水印（Watermark）
一、理解水印
在前端开发中，实现水印（Watermark）通常是为了在页面上显示半透明的文字或图案，以标识版权、归属或防止内容被非法使用。
二、水印（Watermark）的原理
水印并未真正与页面内容物理混合（如图片像素合并），而是通过视觉叠加或内容覆盖的方式，在用户感知层面实现与页面内容的共存。其核心是利用透明度、定位和重复图案，让水印在不影响主要内容阅读的同时，达到标识或防篡改的目的。
三、实现
3.1、使用 CSS + 绝对定位的 DOM 元素
.watermark-container {position: relative;
}.watermark {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; /* 允许点击穿透水印 */background: url("data:image/...");z-index: 9999;
}3.2、使用 Canvas 动态生成水印
function setWatermark(text) {const canvas = document.createElement('canvas');canvas.width = 200;canvas.height = 150;const ctx = canvas.getContext('2d');ctx.rotate((-20 * Math.PI) / 180); // 旋转文字ctx.font = '16px Arial';ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillText(text, canvas.width / 2, canvas.height / 2);// 将 Canvas 作为背景图应用document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;
}setWatermark('公司机密');3.3、使用 CSS ::after 伪元素
body::after {content: '机密文件';position: fixed;bottom: 50%;right: 50%;transform: translate(50%, 50%) rotate(-45deg);opacity: 0.2;font-size: 24px;pointer-events: none;
}四、MutationObserver 防篡改
// 监听 DOM 变化，防止水印被删除
function protectWatermark(selector) {const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.removedNodes) {const removed = Array.from(mutation.removedNodes);if (removed.some(node => node.matches?.(selector))) {// 重新添加水印setWatermark('机密文件');}}});});observer.observe(document.body, { childList: true, subtree: true });
}// 调用保护函数
protectWatermark('.watermark');