前端实现添加水印功能的四种方法

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

这篇文章主要介绍了前端实现添加水印功能的四种方法,分别是使用CSS、Canvas、SVG以及动态生成水印图像,每种方法都有其特点和适用场景,并且每种方法都给出了实例代码,需要的朋友可以参考下

方法 1: 使用 CSS 实现水印

通过 CSS 可以简单地实现全局水印，即给需要添加水印的元素添加背景图。这种方式比较简单方便，适合静态页面，但灵活性和防篡改能力较差。
具体的实现示例：

<!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>内容区域</h1>
    <p>这是需要加水印的内容</p>
  </div>
</body>
</html>

方法 2: 使用 Canvas 实现水印

使用 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>
  <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>内容区域</h1>
    <p>这是需要加水印的内容</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';

      // 旋转并重复绘制水印文本
      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 实现水印

SVG 也是一种实现水印的有效方式，容易实现和修改，具备良好的图形渲染能力。性能不如 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>内容区域</h1>
    <p>这是需要加水印的内容</p>
  </div>
</body>
</html>

方法 4: 动态生成水印图像

更灵活的方式是通过 JavaScript 动态生成水印图像。相对其他方式，最高的灵活性，可以在运行时生成任意图案的水印。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态水印示例</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>内容区域</h1>
    <p>这是需要加水印的内容...</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>

总结

到此这篇关于前端实现添加水印功能的四种方法的文章就介绍到这了,更多相关前端添加水印功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Mac/Windows下如何安装Node.js
在Mac、Ubuntu、Windows、Centos下如何安装Node.js，想必有一些朋友还不会吧，本文整理了一些，需要的朋友可以参考下
2013-11-11
antd/fusion表格增加圈选复制功能思路详解
我们存在着大量在PC页面通过表格看数据业务场景，表格又分为两种，一种是antd / fusion这种基于dom元素的表格，另一种是通过 canvas 绘制的类似 excel 的表格，这篇文章主要介绍了antd/fusion表格增加圈选复制功能,需要的朋友可以参考下
2023-09-09
微信小程序用户授权、位置授权及获取微信绑定手机号
这篇文章主要介绍了信小程序用户授权、位置授权及获取微信绑定手机号,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
JS实现表单中checkbox对勾选中增加边框显示效果
这篇文章主要介绍了JS实现表单中checkbox对勾选中增加边框显示效果,可实现点击后图片增加边框及勾选的功能,非常简洁实用,需要的朋友可以参考下
2015-08-08
xmlplus组件设计系列之按钮（2）
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
详解如何构建Promise队列实现异步函数顺序执行
这篇文章主要介绍了详解如何构建Promise队列实现异步函数顺序执行，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
JavaScript 就地编辑HTML节点实现代码
JavaScript 就地编辑HTML节点实现代码
2009-07-07
7个令人惊讶的JavaScript特性详解
在学习ES6的过程中我碰到了几个特性，它们让我惊讶，其中大部分是关于 ES6 的特性但也有一部分是 ES3 特性，这些特性我以前从未用过，而现在我将开始使用它们，感兴趣的小伙伴可以跟着小编一起来学习
2023-05-05
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
这篇文章通过php+jquery+ajax+mysql相结合，实现当用户浏览网站文章或者是论坛帖子后，想表达自己浏览后的心情，发表自己的感受，很多网站都提供了用户发表心情的功能，通过此功能可以很直观的分析文章或者是论坛对浏览者的用户体验度
2015-08-08
JS中reduce和map的优雅写法分享
这篇文章主要为大家详细介绍了JavaScript中一些reduce和map的优雅写法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03