前端水印功能（svg,canvas文字水印，canvas图片水印）

明水印

内容生成：svg

1.动态生成svg图片，给body元素添加背景图片，设置背景图片的样式

html 复制代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成 SVG 水印示例</title>
    <style>
        /* 页面内容样式 */
        
        body {
            margin: 0;
            min-height: 100vh;
            position: relative;
        }
        
        .content {
            position: relative;
            z-index: 2;
            text-align: center;
            margin-top: 20%;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>这是一个带动态水印的页面</h1>
        <p>页面背景上显示了动态生成的SVG水印。</p>
    </div>

    <script>
        // 动态生成SVG水印
        function createWatermark(text) {
            const svg = `
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150">
                    <text x="50%" y="50%" text-anchor="middle" font-size="30" fill="rgba(0,0,0,0.1)" transform="rotate(-45 75,75)" dy=".3em">${text}</text>
                </svg>
            `;
            return `url('data:image/svg+xml,${encodeURIComponent(svg)}')`;
        }
        // 将水印应用到页面背景
        document.body.style.backgroundImage = createWatermark('动态水印');
        document.body.style.backgroundRepeat = 'repeat';
        document.body.style.backgroundSize = '150px 150px';
        document.body.style.backgroundPosition = 'top left';
    </script>
</body>

</html>

2.创建canvas元素，填充水印文字，获取水印的宽高，根据容器的宽高平铺

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Watermark</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        
        #watermarkCanvas {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            /* 让水印层不干扰页面的交互 */
            z-index: 9999;
            /* 确保水印层在最上层 */
        }
    </style>
</head>

<body>

    <div style="height: 2000px;">
        <h1>欢迎来到我的网页!</h1>
        <p>这是一个示例网页，页面内容较长，以演示水印如何平铺整个页面。</p>
    </div>

    <canvas id="watermarkCanvas"></canvas>

    <script>
        // 获取canvas元素
        const canvas = document.getElementById('watermarkCanvas');
        const ctx = canvas.getContext('2d');

        // 设置水印文字和样式
        const watermarkText = '这是水印';
        const watermarkFont = '30px bold  Arial';
        const watermarkColor = 'rgba(0, 0, 0, 0.3)'; // 透明黑色

        // 更新canvas尺寸为页面的尺寸
        function setCanvasSize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        // 绘制水印
        function drawWatermark() {
            // 清空canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 设置字体和颜色
            ctx.font = watermarkFont;
            ctx.fillStyle = watermarkColor;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            const margin = 100; // 水印文字间距

            // 获取水印的宽高
            const textWidth = ctx.measureText(watermarkText).width;
            const textHeight = parseInt(watermarkFont); // 获取字体的高度


            // 水印平铺
            for (let y = 0; y < canvas.height; y += textHeight + margin) {
                for (let x = 0; x < canvas.width; x += textWidth + margin) {
                    ctx.save();
                    ctx.translate(x, y);
                    ctx.rotate(-30 * Math.PI / 180); // 设置水印倾斜角度
                    ctx.fillText(watermarkText, 0, 0);
                    ctx.restore();
                }
            }
        }

        // 调整窗口大小时更新canvas尺寸和水印
        window.addEventListener('resize', () => {
            setCanvasSize();
            drawWatermark();
        });

        // 初始化时设置canvas大小并绘制水印
        setCanvasSize();
        drawWatermark();
    </script>

</body>

</html>

3创建canvas元素，填充图片水印，获取水印的宽高，根据容器的宽高平铺

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 水印</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            /* 确保 canvas 不会拦截鼠标事件 */
        }
    </style>
</head>

<body>
    <canvas id="watermarkCanvas"></canvas>

    <script>
        const canvas = document.getElementById("watermarkCanvas");
        const ctx = canvas.getContext("2d");

        // 设置 canvas 大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        // 调整 canvas 大小
        resizeCanvas();

        // 页面大小变化时调整 canvas
        window.addEventListener('resize', resizeCanvas);

        // 加载 logo 图片
        const watermarkImage = new Image();
        watermarkImage.src = 'img.png '; 

        watermarkImage.onload = function() {
            // 图片加载完成后，绘制水印
            drawWatermark();
        };

        function drawWatermark() {
            const imageWidth = 100; // 水印图片的宽度
            const imageHeight = 100; // 水印图片的高度

            // 清空 canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制水印
            for (let y = 0; y < canvas.height; y += imageHeight) {
                for (let x = 0; x < canvas.width; x += imageWidth) {
                    ctx.globalAlpha = 0.3; // 设置透明度
                    ctx.drawImage(watermarkImage, x, y, imageWidth, imageHeight);
                }
            }
        }
    </script>
</body>

</html>