关键步骤
- 初始化和配置：
- 组件接受一系列配置参数，如水印文本、字体、颜色、旋转角度等。
- 这些参数用于控制水印的外观和位置。
- Canvas绘图：
- 创建一个隐藏的
<canvas>元素。 - 使用Canvas API绘制水印图案，根据配置参数设置文本内容、字体样式、颜色、透明度和旋转角度。
- 将绘制好的图案转换为Data URL格式的图像。
- 应用水印：
- 将生成的Data URL图像作为背景图像应用到目标区域。
- 使用CSS设置背景图像的位置、重复方式和透明度，以确保水印覆盖整个目标区域。
核心代码示例
以下是一个代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.target {width: 100vw;height: 100vh;}</style>
</head>
<body><div> </div><script>
function createWatermark ({text = '水印', fontSize = 16, color = 'rgba(0, 0, 0, 0.1)', rotate = -30}) {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const width = 200;const height = 200;canvas.width = width;canvas.height = height;ctx.clearRect(0, 0, width, height);ctx.font = `${fontSize}px Arial`;ctx.fillStyle = color;ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.translate(width / 2, height / 2);ctx.rotate((Math.PI / 180) * rotate);ctx.fillText(text, 0, 0);const dataUrl = canvas.toDataURL('image/png');return dataUrl
}function setStyle(watermarkElement) {const dataUrl = createWatermark({});watermarkElement.style.backgroundImage = `url(${dataUrl})`;watermarkElement.style.backgroundRepeat = 'repeat';watermarkElement.style.width = '100vw';watermarkElement.style.height = '100vh';watermarkElement.style.position = 'absolute';watermarkElement.style.top = 0;watermarkElement.style.pointerEvents = 'none'watermarkElement.style.visibility = 'visible'watermarkElement.style.opacity = 1
}
const watermarkElement = document.createElement('div');
setStyle(watermarkElement)
document.body.appendChild(watermarkElement);const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'childList' && !document.contains(watermarkElement)) {document.body.appendChild(watermarkElement); // 重新添加水印}if (mutation.type === 'attributes' && mutation.target === watermarkElement) {// 恢复水印属性setStyle(watermarkElement)}});
});observer.observe(document.body, {childList: true,attributes: true,subtree: true,
});</script>
</body>
</html>
在实现防篡改的水印组件时，可以使用 MutationObserver 监控 DOM 变化：
MutationObserver 可以监控 DOM 树的变化，包括节点的添加、删除和属性的变化。当检测到水印元素被修改或删除时，可以立即恢复或重新添加水印。
)
