添加页面文字水印js

页面文字水印是一种在网页上添加半透明文字的技术，用于标识页面内容或保护版权。以下是关于添加页面文字水印的基础概念、优势、类型、应用场景以及实现方法和可能遇到的问题及解决方法。

基础概念

文字水印通常是通过在页面上叠加一层半透明的文字来实现的。这层文字可以是固定的，也可以是动态生成的，通常包含版权信息、公司名称或其他标识性文字。

优势

版权保护：明确显示内容的版权所有者。
防止未经授权的使用：增加非法复制或截图的难度。
品牌宣传：在页面上展示公司或品牌名称。

类型

静态水印：固定不变的文字或图像。
动态水印：根据用户或环境信息动态生成的水印。

应用场景

网站后台管理页面：防止未经授权的截图或拍照。
文档管理系统：保护文档不被随意复制。
媒体内容网站：保护视频或图片内容的版权。

实现方法（JavaScript示例）

以下是一个简单的JavaScript示例，用于在页面上添加静态文字水印：

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

    ctx.font = '16px Arial';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const x = width / 2;
    const y = height / 2;
    ctx.rotate(-Math.PI / 4);
    ctx.fillText(text, x, y);

    const watermark = document.createElement('div');
    watermark.style.position = 'fixed';
    watermark.style.top = '0';
    watermark.style.left = '0';
    watermark.style.width = '100%';
    watermark.style.height = '100%';
    watermark.style.pointerEvents = 'none';
    watermark.style.zIndex = '9999';
    watermark.style.backgroundImage = `url(${canvas.toDataURL()})`;

    document.body.appendChild(watermark);
}

// 使用示例
addWatermark('Sample Watermark');