网页防止水印移除策略

在网页中禁止别人移除水印是一个具有挑战性的任务，因为前端代码是公开的，用户可以通过浏览器开发者工具或其他手段修改或移除水印。尽管如此，你可以采取一些措施来增加移除水印的难度，以下是一些常见的策略：

1. 使用 Canvas 绘制水印

通过 Canvas 绘制水印可以增加移除水印的难度，因为水印是直接绘制在画布上的，而不是简单的 DOM 元素。

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.rotate(-0.2);
ctx.fillText('Watermark', 50, 50);

document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;

2. 使用 CSS 伪元素

通过 CSS 伪元素添加水印，虽然可以通过开发者工具移除，但可以增加一定的复杂性。

body::after {
    content: 'Watermark';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 50px;
    color: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 9999;
}

3. 动态生成水印

通过 JavaScript 动态生成水印，并定期检查水印是否存在，如果被移除则重新添加。

function addWatermark() {
    const watermark = document.createElement('div');
    watermark.innerText = 'Watermark';
    watermark.style.position = 'fixed';
    watermark.style.top = '50%';
    watermark.style.left = '50%';
    watermark.style.transform = 'translate(-50%, -50%) rotate(-45deg)';
    watermark.style.fontSize = '50px';
    watermark.style.color = 'rgba(0, 0, 0, 0.1)';
    watermark.style.pointerEvents = 'none';
    watermark.style.zIndex = '9999';
    document.body.appendChild(watermark);
}

setInterval(() => {
    if (!document.querySelector('.watermark')) {
        addWatermark();
    }
}, 1000);

addWatermark();

4. 使用 WebGL 或 SVG

通过 WebGL 或 SVG 绘制水印，这些技术生成的水印更难被移除。

5. 后端渲染水印

最安全的方式是在后端渲染水印，将水印直接嵌入到图片或视频中。这样即使用户下载了资源，水印也会保留。

6. 混淆和加密

使用 JavaScript 混淆工具对代码进行混淆，增加逆向工程的难度。虽然不能完全防止，但可以增加移除水印的复杂性。

7. 监控 DOM 变化

使用 MutationObserver 监控 DOM 变化，如果检测到水印被移除，则重新添加。

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (!document.querySelector('.watermark')) {
            addWatermark();
        }
    });
});

observer.observe(document.body, { childList: true, subtree: true });

8. 禁用右键和开发者工具

虽然不推荐，但你可以尝试禁用右键菜单和开发者工具来防止用户直接修改页面内容。

document.addEventListener('contextmenu', (e) => e.preventDefault());
document.addEventListener('keydown', (e) => {
    if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
        e.preventDefault();
    }
});

总结

虽然无法完全防止水印被移除，但通过上述方法可以显著增加移除水印的难度。最有效的方式是将水印嵌入到图片或视频中，或者在后端渲染时添加水印。