快捷導(dǎo)航

前端實現(xiàn)添加水印功能的四種方法

更新時間：2025年03月12日 11:35:27 作者：www.www

這篇文章主要介紹了前端實現(xiàn)添加水印功能的四種方法,分別是使用CSS、Canvas、SVG以及動態(tài)生成水印圖像,每種方法都有其特點和適用場景,并且每種方法都給出了實例代碼,需要的朋友可以參考下

方法 1: 使用 CSS 實現(xiàn)水印

通過 CSS 可以簡單地實現(xiàn)全局水印，即給需要添加水印的元素添加背景圖。這種方式比較簡單方便，適合靜態(tài)頁面，但靈活性和防篡改能力較差。
具體的實現(xiàn)示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS水印示例</title>
  <style>
    .watermark {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      pointer-events: none;
      opacity: 0.2;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="30" fill="rgba(0,0,0,0.1)">水印文本</text></svg>') repeat;
    }
  </style>
</head>
<body>
  <div class="watermark"></div>
  <div>
    <h1>內(nèi)容區(qū)域</h1>
    <p>這是需要加水印的內(nèi)容</p>
  </div>
</body>
</html>

方法 2: 使用 Canvas 實現(xiàn)水印

使用 Canvas 可以生成更復(fù)雜的水印圖案，適合動態(tài)內(nèi)容，并且相對難以篡改。

<!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>
    .watermark {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      pointer-events: none;
      opacity: 0.2;
    }
  </style>
</head>
<body>
  <canvas id="watermarkCanvas" class="watermark"></canvas>
  <div>
    <h1>內(nèi)容區(qū)域</h1>
    <p>這是需要加水印的內(nèi)容</p>
  </div>
  <script>
    window.onload = function() {
      var canvas = document.getElementById('watermarkCanvas');
      var ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var text = '水印文本';
      var width = canvas.width;
      var height = canvas.height;
      ctx.font = '30px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      // 旋轉(zhuǎn)并重復(fù)繪制水印文本
      for (var x = 0; x < width; x += 200) {
        for (var y = 0; y < height; y += 200) {
          ctx.save();
          ctx.translate(x, y);
          ctx.rotate(- Math.PI / 4);
          ctx.fillText(text, 0, 0);
          ctx.restore();
        }
      }
    };
  </script>
</body>
</html>

方法 3: 使用 SVG 實現(xiàn)水印

SVG 也是一種實現(xiàn)水印的有效方式，容易實現(xiàn)和修改，具備良好的圖形渲染能力。性能不如 canvas 好，但是dom更友好

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG水印示例</title>
  <style>
    .watermark {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      pointer-events: none;
      opacity: 0.2;
    }
  </style>
</head>
<body>
  <div class="watermark">
    <svg width="100%" height="100%">
      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="30" fill="rgba(0,0,0,0.1)" transform="rotate(-45, 50, 50)">水印文本</text>
    </svg>
  </div>
  <div>
    <h1>內(nèi)容區(qū)域</h1>
    <p>這是需要加水印的內(nèi)容</p>
  </div>
</body>
</html>

方法 4: 動態(tài)生成水印圖像

更靈活的方式是通過 JavaScript 動態(tài)生成水印圖像。相對其他方式，最高的靈活性，可以在運行時生成任意圖案的水印。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>動態(tài)水印示例</title>
  <style>
    .watermark {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      pointer-events: none;
      background-repeat: repeat;
      opacity: 0.2;
    }
  </style>
</head>
<body>
  <div id="watermarkContainer"></div>
  <div>
    <h1>內(nèi)容區(qū)域</h1>
    <p>這是需要加水印的內(nèi)容...</p>
  </div>
  <script>
    function createWatermark(text) {
      var canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;
      var ctx = canvas.getContext('2d');

      ctx.font = '30px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.translate(100, 100);
      ctx.rotate(- Math.PI / 4);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, 0, 0);

      return canvas.toDataURL('image/png');
    }

    window.onload = function() {
      var watermarkContainer = document.getElementById('watermarkContainer');
      watermarkContainer.classList.add('watermark');
      watermarkContainer.style.backgroundImage = 'url(' + createWatermark('水印文本') + ')';
    };
  </script>
</body>
</html>