js 为页面加水印

在JavaScript中为页面添加水印，通常是通过在页面上绘制半透明的图片或文字来实现的。以下是一些基础概念、优势、类型、应用场景以及实现方法：

基础概念

Canvas API：HTML5提供的API，可以在网页上绘制图形。
SVG：可缩放矢量图形，也可以用来创建水印。
CSS：通过CSS的background-image属性也可以实现水印效果。

优势

保护版权：防止内容被未经授权的使用或截图。
品牌宣传：在页面上添加公司或产品的标志。
防伪标识：在重要文件或证书上添加防伪水印。

类型

文字水印：通常使用半透明的文字。
图片水印：使用半透明的图片，如logo。
重复水印：在页面上重复排列的水印。

应用场景

文档预览：在PDF或图片预览时添加水印。
截图保护：防止网页内容被截图传播。
数据展示：在数据可视化图表上添加水印。

实现方法

以下是一个使用Canvas API在页面上添加文字水印的简单示例：

function addWatermark(text, opacity, fontSize, fontFamily) {
    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.globalAlpha = opacity;
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 文字颜色和透明度
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 在页面上重复绘制水印
    for (let x = 0; x < width; x += fontSize * 2) {
        for (let y = 0; y < height; y += fontSize * 2) {
            ctx.fillText(text, x, y);
        }
    }

    const watermark = new Image();
    watermark.src = canvas.toDataURL('image/png');
    document.body.style.backgroundImage = `url(${watermark.src})`;
    document.body.style.backgroundRepeat = 'repeat';
}

// 使用方法
addWatermark('Confidential', 0.1, 20, 'Arial');