当前位置：首页 > news >正文

给页面元素添加水印

news 来源：原创 2024/9/30 5:27:10

关键步骤

初始化和配置：

组件接受一系列配置参数，如水印文本、字体、颜色、旋转角度等。
这些参数用于控制水印的外观和位置。

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>