前端水印的实现主要有两种思路：canvas和dom结构。1.canvas方式性能较好，适合批量生成水印，但内容难以被选中和复制；2.dom结构方式允许用户选中和复制水印内容，但性能相对较差且可能影响页面渲染。为了防止水印被移除，可以采用定时重绘、mutationobserver监听、服务端渲染水印、字体加密等方式。性能优化方面，canvas可通过减少元素数量和使用drawimage提升性能，dom可通过减少元素数量、css sprites、懒加载和虚拟dom优化。水印内容应动态化，结合用户信息由后端或前端生成。同时需平衡用户体验，控制透明度、位置和内容长度，避免影响阅读和视觉体验。
前端水印，简单来说，就是在网页上加上一层肉眼可见的标记，表明版权或者其他信息。实现方式有很多，但核心都是在页面上“画”出来。
解决方案
实现水印效果，主要有两种思路：一是使用Canvas，二是利用DOM结构。Canvas的优势在于性能较好，可以批量生成水印，但缺点是水印内容难以被选中和复制。DOM结构的优势在于水印内容可以被选中和复制，方便用户操作，但缺点是性能相对较差，大量水印可能会影响页面渲染。
立即学习“前端免费学习笔记（深入）”；
Canvas实现水印
- 创建一个Canvas元素，设置其宽高与页面相同，并将其定位到页面的最顶层。
- 使用Canvas API，在Canvas上绘制水印文字或图片。可以设置水印的字体、颜色、大小、旋转角度等属性。
- 将Canvas元素添加到页面中。
- 监听页面的resize事件，当页面大小发生变化时，重新绘制水印，以保证水印的位置和大小始终与页面匹配。
function addWatermarkCanvas(text) {
const canvas = document.createElement('canvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.zIndex = '9999';
canvas.style.pointerEvents = 'none'; // 防止遮挡页面元素
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.font = '20px Microsoft YaHei';
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.rotate(-20 * Math.PI / 180); // 旋转角度
const x = canvas.width / 2;
const y = canvas.height / 2;
ctx.fillText(text, x, y);
window.addEventListener('resize', () => {
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
ctx.font = '20px Microsoft YaHei';
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.rotate(-20 * Math.PI / 180);
ctx.fillText(text, x, y);
});
}
addWatermarkCanvas('版权所有');DOM结构实现水印
- 创建一个包含水印文字或图片的DOM元素。
- 设置DOM元素的样式，使其定位到页面的指定位置，并设置透明度。
- 将DOM元素添加到页面中。
- 重复步骤1-3，创建多个水印元素，并将它们添加到页面的不同位置，以实现水印的平铺效果。
- 监听页面的resize事件，当页面大小发生变化时，重新计算水印元素的位置，以保证水印的位置始终与页面匹配。
function addWatermarkDOM(text) {
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.top = '0';
container.style.left = '0';
container.style.width = '100%';
container.style.height = '100%';
container.style.zIndex = '9999';
container.style.pointerEvents = 'none';
document.body.appendChild(container);
const watermark = document.createElement('div');
watermark.style.position = 'absolute';
watermark.style.top = '50%';
watermark.style.left = '50%';
watermark.style.transform = 'translate(-50%, -50%) rotate(-20deg)';
watermark.style.fontSize = '20px';
watermark.style.color = 'rgba(0, 0, 0, 0.2)';
watermark.textContent = text;
container.appendChild(watermark);
// 平铺水印
const num = 5; // 水印数量
for (let i = 0; i < num; i++) {
for (let j = 0; j < num; j++) {
if (i === 0 && j === 0) continue; // 避免重复添加
const newWatermark = watermark.cloneNode(true);
newWatermark.style.top = `${(i / num) * 100}%`;
newWatermark.style.left = `${(j / num) * 100}%`;
container.appendChild(newWatermark);
}
}
window.addEventListener('resize', () => {
// 重新计算水印位置，这里省略具体实现
});
}
addWatermarkDOM('版权所有');如何防止水印被移除？
水印的防护，是个猫鼠游戏。完全防止被移除是不可能的，只能增加移除的难度。
-
Canvas水印： 可以通过定时器不断重绘水印，即使被移除，也会很快恢复。 还可以监听
MutationObserver，当Canvas元素被修改或移除时，重新创建水印。 -
DOM水印： 同样可以使用定时器不断添加水印元素。 也可以监听
MutationObserver，当水印元素被修改或移除时，重新创建水印。 - 服务端渲染水印： 在服务端生成带有水印的图片，然后将图片返回给前端。 这种方式可以有效地防止水印被移除，但会增加服务器的压力。
- 字体加密： 自定义字体，将水印文字嵌入到字体文件中。 这样，即使有人想要移除水印，也需要先破解字体文件。
水印的性能优化
大量水印会影响页面性能，需要进行优化。
- Canvas水印： 减少Canvas元素的数量，尽量在一个Canvas元素上绘制所有的水印。 使用drawImage方法绘制水印图片，而不是fillText方法绘制水印文字，可以提高性能。
- DOM水印： 减少DOM元素的数量，尽量使用CSS样式来控制水印的位置和大小。 使用CSS Sprites技术，将多个水印图片合并成一个图片，可以减少HTTP请求。
- 懒加载水印： 只在用户滚动到页面底部时才加载水印。
- 虚拟DOM： 使用虚拟DOM技术，可以减少DOM操作的次数，提高页面渲染性能。
水印内容动态化
水印内容不应该是静态的，可以根据用户的登录状态、IP地址等信息动态生成。
- 后端生成水印内容： 将用户信息传递给后端，由后端生成水印内容，然后将水印内容返回给前端。
- 前端动态生成水印内容： 在前端获取用户信息，然后使用JavaScript动态生成水印内容。
水印与用户体验
水印虽然可以保护版权，但也会影响用户体验。 需要在保护版权和用户体验之间找到平衡。
- 水印的透明度： 水印的透明度不宜过高，以免影响用户的阅读体验。
- 水印的位置： 水印的位置不宜过于显眼，以免影响用户的视觉体验。
- 水印的内容： 水印的内容不宜过于冗长，以免影响用户的阅读体验。
总的来说，实现前端水印是一个平衡的过程，需要在安全性、性能和用户体验之间做出权衡。 没有完美的解决方案，只有最适合你的方案。
