html添加水印

使用SVG

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg水印</title>
</head>

<body>
  <h1>页面内容</h1>
  <p>这里是带有水印的页面示例。</p>

  <script>
    function createWatermarkSVG(text) {
      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
        <text x="50%" y="50%" dy=".35em" text-anchor="middle" fill="rgba(0,0,0,0.1)" font-size="30" transform="rotate(-45, 100, 100)">${text}</text>
      </svg>`;

      // 将 SVG 字符串转为 UTF-8 编码的 Base64
      const utf8Encoder = new TextEncoder();
      const utf8Array = utf8Encoder.encode(svg);
      const base64String = btoa(String.fromCharCode.apply(null, utf8Array));

      return `data:image/svg+xml;base64,${base64String}`;
    }

    document.body.style.backgroundImage = `url(${createWatermarkSVG("水印内容")})`;
  </script>
</body>

</html>

使用Canvas

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas水印</title>
</head>

<body>
  <h1>页面内容</h1>
  <p>这里是带有水印的页面示例。</p>

  <script>
    // 创建水印 Canvas
    function createWatermark(text) {
      const canvas = document.createElement("canvas");
      canvas.width = 200;
      canvas.height = 150;
      const ctx = canvas.getContext("2d");

      // 绘制水印
      ctx.font = "20px Arial";
      ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
      ctx.rotate(-30 * Math.PI / 180);
      ctx.fillText(text, 30, 100);

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

    // 将水印应用为页面背景
    document.body.style.backgroundImage = `url(${createWatermark("水印内容123")})`;
  </script>
</body>

</html>

html添加水印 ​

使用SVG ​

使用Canvas ​

html添加水印

使用SVG

使用Canvas